Change the default header color in MVC5 app

Question

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 ...

The MVC5 template uses Bootstrap's navbar: http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 — nemesv, Apr 13 '14 at 12:16
Try using Firebug (Firefox addon) and see where you have to change, also you can change it online to see the effect instantly — Reza, Apr 13 '14 at 12:41

score 28 · Accepted Answer · answered Apr 13 '14 at 12:46

28

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; }

answered Apr 13 '14 at 12:46

Agha A. Raza

329
4
9

That seemed to work in dev for me but not in production. This is what worked in production, go figure: .navbar{ background-image: none; } I found it here: http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3?lq=1 – JustJohn May 06 '16 at 03:49

score 3 · Answer 2 · answered Nov 12 '18 at 08:40

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>

score 2 · Answer 3 · edited Oct 13 '20 at 21:39

2

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

and find this code block:

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

edited Oct 13 '20 at 21:39

oguzhan

2,073
1
26
23

answered Oct 13 '20 at 14:40

Rrumeysa

21
3

score 1 · Answer 4 · answered May 20 '16 at 08:15

1

Add:

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

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

answered May 20 '16 at 08:15

klingu

559
1
7
19

Change the default header color in MVC5 app

4 Answers4