Currently, I am attempting to modify basic CSS attributes within the default theme that is included with a new ASP.NET MVC 5 application in Visual Studio 2013. Specifically, my goal is to change the background color of the navigation menu.
With the help of Firebug, I have identified the property that needs to be altered and its new value is:
.navbar-inverse { background-color: #5B80A5}
Initially, I tried to add the overridden CSS line in the Site.css file because I noticed the following lines in BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
Despite this, the background color of the navigation menu did not change as expected.
Next, I searched for .navbar-inverse within my project and the search results were as follows:
Web\Content\bootstrap-theme.css(240):.navbar-inverse {
Web\Content\bootstrap-theme.css(249):.navbar-inverse .navbar-nav > .active > a {
...
I added the custom CSS line at the end of each of the above files, but unfortunately, the changes did not take effect. I made sure to rebuild the project after each modification and cleared the browser cache, but to no avail.
Does anyone have any suggestions on how to successfully override default bootstrap styles? I appreciate any help as this issue is really frustrating!
Some related questions that did not provide a solution:
Overriding bootstrap styles, How to override bootstrap input box style in table?, Cant override bootstrap