RadzenMenu z-order problem

I'm brand new to Radzen and the first control I try was a top menu and the dropdowns are behind the rest of the form. Cut\paste from this website. Is there some extra magic required to get the right z-order? I'm using this is VS 2019, blazor.server project.

Hi @kevin1,

Can you point us to some of our demos where we can reproduce this?

I'm only aware of the one at Blazor Menu | a free UI component by Radzen.


I put that in my NavMenu.razor and refer to it from this MainLayout.razor
@inherits LayoutComponentBase

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

<div class="container">
    <div class="row text-center">
        <div class="col-2">
        <div class="col-10">
            <NavMenu />

    <div class="container pb-3">
        <main role="main" class="">

    <footer class="border-top footer">
        <div class="container">
            &copy; 2021

if I increase the height of the Card, I only seem to be able to click on submenu items that are within the card. Lower items display with lower z-order "under" the parts of the @Body.

I was having the same problem with the ProfileMenu drop down appearing under the column headers in the RadzenDataGrid.

Apparently both ".ul.rz-profile-menu" and ".rz-grid-table thead th" use the same z-index of 1. Raising the z-index on the profile menu fixes it. I'm sure the RadzenMenu can be fixed in a similar fashion.

Below fixed my issue:

.ul.rz-profile-menu {
z-index: 2;

Fix for the RadzenMenu:

.rz-navigation-menu {
z-index: 2;

1 Like

Worked like a charm. tks tons.