How To Change ASP.NET Core Web App Navbar Background Color

Viewed 3763

I am trying to edit the background color of the navbar of my dotnet core razor page web app. Original, it is:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">

I tried to create a bg-blue in the bootstrap.css and change bg-white above to bg-blue but it doesn't work. What did I do wrong? Thank you for help me!

4 Answers

I've noticed that sometimes the bootstrap classes dont work for me so I suggest trying normal css to color the background of the navbar.

style="background-color: blue"

Try adding the above as a parameter in the nav element

I am using ASP.net Core with .net Core 5. Go to the file called NavMenu.js in the render method it will say:

<header>
 <Navbar classname="..." light>

Remove the light attribute and it will use your css values.

Fixed it is:

<header>
 <Navbar classname="...">

For styling any kind of box, text, header, footer etc You need to use style attribute if you bootstrap class don't work. yo can implement as follow:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3" style="background-color: green">

Remove "bg-white" and add style="background-color: blue"

So your "<nav>" element looks as follows

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3" style="background-color: blue">
Related