CODEWITHSUNDEEP
twitter-bootstrapblazor
Henrique Pombo
Henrique Pombo

Reputation: 613

Blazor NavMenu Toggler Not Showing

I'm using Blazor's default NavMenu Component, and its toggler won't appear on wide screens (>640px; it works on smaller ones). Analysing the css: enter image description here There is a display:none.

What I've tried

Adding the following code to site.css:

@media (min-width: 768px) {
    .navbar-toggler {
        display: normal;
    }
}

Adding a static inline style reference with display:normal!important; (will appear crossed and overwritten by the image above).

Changing none to normal in the browser (While the icon will appear, it's functions: collapsing the navmenu won't function).

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">QRQC</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
    ...
    </ul>
</div>

_Host.cshtml

@page "/"
@namespace QRQC.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QRQC</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="QRQC.styles.css" rel="stylesheet" />
    <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/fontawesome.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

    <script src="lib/fontawesome/js/all.min.js"></script>
    <script src="_content/MatBlazor/dist/matBlazor.js"></script>

</head>
<body>
    <component type="typeof(App)" render-mode="Server" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="js/jquery/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <script src="js/site.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

</body>
</html>

Upvotes: 2

Views: 4526

Answers (1)

Henrique Pombo
Henrique Pombo

Reputation: 613

NavMenu.razor.css has the following:

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

thus, not displaying the toggler.

Upvotes: 6

Related Questions