Menu
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>
664
Use any of the . bg-color classes to add a background color to the navbar. Tip: Add a white text color to all links in the navbar with the . navbar-dark class, or use the .
Creating a transparent navbar is very easy - just don't add a color class . bg-* to the navbar. In this case, the Navbar will take the color of the parent's background color.
The text color of the navigation bar can be changed using two inbuilt classes: navbar-light: This class will set the color of the text to dark. This is used when using a light background color. navbar-dark: This class will set the color of the text to light.
Use navbar-dark for lighter text color (white), or navbar-light for darker text color (black).
If we open our sidebar and switch to dark mode, we are going to see that the sidebar’s color is not changing. To fix that, we have to add three more properties to the Pallete object: We can see, we apply it on the sidebar too. Right now, we have a working Blazor material navigation menu but, we can improve our code.
You can add background color with inline CSS in main class the color as per your choice like this in MainLayout.razor.
Each palette color gets converted to a class with the color as background and its contrast, but also separate classes for only background or text color. The CSS class is bound to the MudBlazor theme and updated if you change the theme dynamicly. You can read more about theming MudBlazor here.
For a demo of the Vertical bar in action, please check out this Blazorise demo. You can create a right-aligned Vertical style Bar easily by following two key principals. Using the Layout to accommodate the right-align bar, by putting the LayoutSider section after the Layout section (see in example below).
In "MainLayout.razor"
<div style="background-image:none;background-color:cadetblue;" class="sidebar">
<NavMenu />
</div>
Late answer I was reviewing first posts. In app.css in the client change the sidebar class :
.sidebar {
background-color: orange;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
