How to update the CSS of the top navigation bar in MVC

Home > Search > How-to
  by

The top menu bar in an MVC application has a black background with white font.

 

Do the following to ensure that CSS changes are published:

  1. In Solution Explorer, expand the App_Start folder and select the BundleConfig.cs file
  2. Add the following markup inside of the public static void RegisterBundles(BundleCollection bundles) markup:
BundleTable.EnableOptimizations = false;

 

Let's change the background color and font color:

In Solution Explorer, expand the Content folder and select the bootstrap.css file. Locate .navbar-inverse in the bootstrap.css file. This controls the background color of the top navigation bar, which is black in the above example. Let's change background-color to #b6ff00 (yellow):

.navbar-inverse {
  background-color: #b6ff00;
  border-color: #bbbbbb;
}

 

Locate .navbar-inverse .navbar-brand. This controls the font color of the left most word, which is freekb.net in the above screen shot. Let's change color to #ff0000 (red):

.navbar-inverse .navbar-brand {
  color: #ff0000;
}

 

Locate .navbar-inverse .navbar-brand:hover. This controls the font color on hover of the left most word, which is freekb.net in the above screen shot. Let's change color to #0026ff (blue):

.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus {
  color: #0026ff;
}

 

Locate .navbar-inverse .navbar-nav > li > a. This controls the font color over the other text in the top navigation bar. Let's change color to #fb7f00 (green):

.navbar-inverse .navbar-nav > li > a {
  color: #fb7f00;
}

 

Locate .navbar-inverse .navbar-nav > li > a:hover. This controls the font color on hover of the other  text in the top navigation bar. Let's change color to #ff7fb6 (pink):

.navbar-inverse .navbar-nav > li > a:hover,.navbar-inverse .navbar-nav > li > a:focus {
  color: #ff7fb6;
}

 

Publish the changes. The top nav now has the new colors.

 

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments