Problem with radzen menu on small screens

Radzen.Blazor Components
1

This menu works well in full windows, but when it's small enough that the whole menu collapses, it won't open on small windows and mobile

<RadzenMenu class="rz-menu-top">
   <RadzenMenuItem Text="Horaire" Icon="event" Path="schedule">     </RadzenMenuItem>
      </RadzenMenu>
2

Hi @xcheshirecat,

The menu is responsive by default. You can use <RadzenMenu Responsive="false"> to disable the responsive styling.

I tested your code in the online demos and it works as expected with enabled responsiveness:

3

yeah, it works for me in the demo as well... so why is it not working. I even have 2 blazor app with the same issue

4

What version of Radzen.Blazor are you using? It could be old where this feature isn't implemented yet.

5

I just installed latest stable and it's doing the same thing

6

If I do that, i can't get to all the menu items

7

We are not sure why it isn't working in your application. If you manage to reproduce the issue in our online demos (they are editable) do let us know and provide the required source code.

8

its working in the demo page, how can i find how it's not working in my app. the 2 blazor apps have the same problem

9

You can try using the browser's developer tools and inspect the CSS that are applied to the menu. You should see something like this in the working case:

image
image998×1560 92.6 KB

This CSS rule is crucial:

@media (max-width: 768px) {
    .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item {
        display: flex;
    }
}
10

it's there, is there anything else to search for

11

Is there any live URL where we can check this app? That's the only thing that comes to mind.

12

http://www.labyrinthedesinsectes.com/Account/Login

13

The <main> element has its width set to 0. This seems to be causing the problem.
menu