Change the default header color in MVC5 app

41,678

Solution 1

In default MVC 5 web site, the background color of the header navigation bar is applied through .navbar-inverse css class available in bootstrap.css file under \Content\bootstrap.css folder of your project.

To change this style, you can override it in the Site.css file instead of changing the base bootstrap css file itself.

Simply adding the following to your Site.css file should change the background color of the navbar.:

.navbar-inverse { background-color: #ccc !important; }

Solution 2

To make this change, go to: \Content\bootstrap.css

and find this code block:

.navbar-inverse {
    background-color: #ff0000;
    border-color: #808080;
}

Solution 3

Just paste this in your site.css

/*green navbar*/ 
.navbar-inverse { background-color:#28a745 !important;  }
a.mynav {background-color:#28a745 !important;}
.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav > li > a  
{color: #ffffff;} 
/* end of green navbar*/ 

in _Layout The Brand Name :

 @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand active" })

For Any Navbar Item

 <li>@Html.ActionLink("Contact", "Contact", "Home", new { @class = "mynav nav-item active" })</li>

Solution 4

Add:

.navbar {
    background-color: #39870C; // kind af green
}

in the Site.css file located in the Content folder to override the background-color.

Share:
41,678
07_05_GuyT
Author by

07_05_GuyT

Updated on July 15, 2022

Comments

  • 07_05_GuyT
    07_05_GuyT almost 2 years

    I've create MVC5 app ,in the view index the header color is black and I want to change it,where can I find it?

    I try to search for #000000 but its in a lot places ...