background and textcolor navbar Blazor

Question

I would like to change the background color of a navbar in Blazor, but I cannot find the way to do it. It cannot be that difficult, I guess. Can anybody tell me?

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

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3 bg-primary">
            <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 bg-primary oi-resize-height">
            <NavLink class="nav-link" href="hd">
                <span class="oi oi-list-rich" aria-hidden="true"></span> hd
            </NavLink>
        </li>
    </ul>
</div>

Equinoctial

The answer is probably in the bootstrap 4 doc : getbootstrap.com/docs/4.4/components/navbar/#color-schemes – Kg

Answer 1

In "MainLayout.razor"

<div style="background-image:none;background-color:cadetblue;" class="sidebar">
    <NavMenu />
</div>

Sheen

Answer 2

The answer is due to blazor having its own css file we need to change the css there.

To change the background-color of the sidebar and navbar, in MainLayout.razor.css thats where the css is located e.g..sidbar .top-row

and finally to change the background of the area where the "Company/project logo" is going to be, for the the css is under NavMenu.razor.css --> .top-row

Fake

Answer 3

Late answer I was reviewing first posts. In app.css in the client change the sidebar class :

.sidebar {
    background-color: orange;
}

Engedi

When using Blazor Server, you can find the sidebar class in the MainLayout.razor.css file. – Zoosporangium

Answer 4

This answer navbar blazer button, remove bg-primary and add bg-secondary bootstrap class is using change the button color.

<button class="navbar-toggler bg-secondary" @onclick="ToggleNavMenu">
    <span class="navbar-toggler-icon "></span>
</button>

// or try this css

.navbar-toggler{
   background:coral !important;
 }

Monasticism