RadzenMenu resizing too late

Radzen.Blazor Components
1

Hi and thanks in advance for the help. I am using a radzenmenu inside a radzencard as a navbar. When i resize, the navbar is not collapsed until 768px but before that i lost half of my navbar. I would like it to collapse or resize at 1200px. I tried overriding the css in the isolated css file of the razor-file but this did nothing. When i change the value in the developertools of @media (max-width: 768px) i get what i need.

How do i collapse the radzenmenu at my desired breakpoint?

<RadzenCard>
        <RadzenMenu>
        <RadzenMenuItem></RadzenMenuItem>
        <RadzenMenuItem>
               <RadzenMenuItem></RadzenMenuItem>
               <RadzenMenuItem></RadzenMenuItem>
               <RadzenMenuItem></RadzenMenuItem>
               <RadzenMenuItem></RadzenMenuItem>
        </RadzenMenuItem>
         <RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
                <RadzenMenuItem Text=></RadzenMenuItem>
        </RadzenMenuItem>
        <RadzenMenuItem ></RadzenMenuItem>
        <RadzenMenuItem ></RadzenMenuItem>
        <RadzenMenuItem >
            <RadzenMenuItem></RadzenMenuItem>
            <RadzenMenuItem></RadzenMenuItem>
        </RadzenMenuItem>
        <RadzenMenuItem></RadzenMenuItem>
        <LoginDisplay/>
    </RadzenMenu>
</RadzenCard>
2

You probably didn't use ::deep when overriding which is required in Blazor isolated CSS files. More info available here: ASP.NET Core Blazor CSS isolation | Microsoft Learn

3

Thanks for your reply. I must be crazy but this didn't do anything.

Schermafbeelding 2023-10-18 082844
Schermafbeelding 2023-10-18 0828443009×993 483 KB

4

You can try adding the CSS to your application CSS file then. Also use the browser developer tools to check what CSS rules are currently applying.

1 Like
5

Adding it to my app.css did the trick. Thank you for the help! Still wondering why this isn't just a value i can set when using the radzenmenu though. But it works for me now :slight_smile:

6

Because it is specified in the CSS file of the theme. It can't be influenced from a component attribute.