Blazor Navbar not showing initial

Question

I am trying to work with blazor on a learning project. After the installation of blazorise the navbar is not working as before. Once I start the webapp the navbar is not showing, when I minimize chrome the navbar-toggler-icon is showing up and upon clicking on the icon I can see my navbar.

On the NavMenu.razor page I only added some navlinks(see code below). So the css classes are original. I don't get any erros on chrome. The generated html after starting for the sidebar is:

<div class="sidebar"><!--!-->
    <!--!--><div class="top-row pl-4 navbar navbar-dark"><!--!-->
    <!--!--><a class="navbar-brand" href="">Rappenspalter</a>
    <button class="navbar-toggler"><!--!-->
        <span class="navbar-toggler-icon"></span>
    </button><!--!-->
</div><!--!-->

<div class="collapse"><!--!-->
    <ul class="nav flex-column"><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="" class="nav-link active"><!--!-->
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="counter" class="nav-link"><!--!-->
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="fetchdata" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="article" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Artikel
            </a><!--!-->
        </li><!--!-->
        <li class="nav-item px-3"><!--!-->
            <!--!--><a href="Kategorien" class="nav-link"><!--!-->
                <span class="oi oi-list-rich" aria-hidden="true"></span> Kategorien
            </a><!--!-->
        </li><!--!-->
    </ul><!--!-->
</div><!--!-->
</div>

When I delete the "collapse" the nav items are showing.

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Test</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">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="article">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Artikel
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="Kategorien">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Kategorien
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

I don't know if the problem was caused by Blazorise, but I only noticed it after the installation. Maybe one of you can help me get the navbar back to normal.

Answer 1

The bootstrap.min.css from blazorise (https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css) & from the vs blazor web template are different. By bootstrap 4.3.1 the collapse class is on "display: none" and has no overwrite and in the blazor web template the collapse class is overwritten from an other class.

The easiest fix for this projekt is to use the bootstrap.min.css from the template and not to use the given include from blazorise.

You can handle it in the index.html in your blazor.client project: use:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

not:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">