Customizing Navbar In MVC 5 With Bootstrap

I am going to explain the way, you need to customize your Application's navbar. I find it interesting, that the new users  who want to use  ASP.NET, want to start their journey with a blast. I mean to do something crazy and interesting. They want to make a Website like in a day or two with Microsoft ASP.NET. However, it is not possible. Anyway, don't stop your shootings toward the sea. Continue with your struggles and one day, you will be able to make something like this. As I mentioned, the new users want everything in a day and here is a way to customize your Applications navbar, according to your needs.

What we will learn,
  1. Change Application Name.
  2. Add a logo to your navbar.
  3. Add extra menus and icons to them.
  4. Add Dropdown Menus.
  5. Work with colors. 
First of all, you need to open your Visual Studio 2015 and create a new MVC Web project. Follow these pictures.

new
 
Next, follow the picture, given below:
 
new
 
Let's start with the first one i.e. add your Application name. This is the first step of our idea, which we are implementing in a Website.
 
Changing the name of the Application

As its name says, you can change your Application name to the name, you need or want to implement in the Application. To do this, just go to Views/Shared/_Layout.chtml. Open it and find this code.
  1. @Html.ActionLink("Application name""Index""Home"new { area = "" }, new { @class = "navbar-brand" }) 
Replace the code highlighted with the name, you want to use for your Application. I have used Bloodbook.
  1. @Html.ActionLink("Bloodbook""Index""Home"new { area = "" }, new { @class = "navbar-brand" }) 
Its all done. Probably, you want to change the font for the name of an Application. It's simple. Go to Content/bootstrap.css, find and modify your navbar-brand code with this one or the font, you like.
  1. .navbar-brand {  
  2.   floatleft;  
  3.   padding15px 15px;  
  4.   font-size40px;  
  5.   line-height20px;  
  6.   font-family:'Facebook Letter Faces'  

Now, run your Application and see the result.
 
Adding a logo to the navbar

This is another most wanted thing in designing navbars and it's too simple. For better results, your logo's resolution should be high with a transparent background. Again, go to Views/Shared/_Layout.chtml and add this code before or after your Application's name code.
  1. <img src="~/Content/Images/icon.png" class="img-center" height="50" width="50" /> 
You can change the source of your  image to your desired folder. You can use class "img-center" or "img-cirlce". Now, run your Application and see the results.
 
Adding extra menus

Hmmm! This is what we need the most to design our navbar, according to our needs. Probably, we need more menus. I am adding here another menu with the name (Search) and you can add too. Again, go to Views/Shared/_Layout.chtml and find this code, add the highlighted code. (You can find the code something like this, it might be different). You can also assign the icons from the glyphicon class. Refer to the code, given below: 
  1. <div class="navbar-collapse collapse">  
  2.     <ul class="nav navbar-nav">  
  3.         <li>  
  4.             <a href="@Url.Action("Index", "Home")">  
  5.                 <span class="glyphicon glyphicon-home"></span>  
  6.                   Home  
  7.             </a>  
  8.         </li>  
  9.         <li>  
  10.             <a href="@Url.Action("Contact", "Home")">  
  11.                 <span class="glyphicon glyphicon-search"></span>  
  12.                 Contact  
  13.             </a>  
  14.         </li>  
  15.         <li>  
  16.         <a href="@Url.Action("About", "Home")">  
  17.             About  
  18.         </a>  
  19.         </li>  
  20.         <li>  
  21.         <a href="@Url.Action("Search", "Home")">  
  22.             Search  
  23.         </a>  
  24.         </li>  
  25.     </ul>  
  26.     @Html.Partial("_LoginPartial")  
  27. </div> 
Yes, This was simple. Now run the Application and see what happens?
 
Adding dropdown menus

This might be a bit hard but not at all difficult. I am going to use a button with a dropdown button. The first button will show the name of the currently logged in user and the second dropdown button can show the menu. As I am going to use this with login partially, so it will only be available, when a user logs in. (Forget about partial logins now, just know that it's something relative to a specific logged in user. We will explain that at some point later.) Go to Views/Shared/_LoginPartial.chtml. Here is the code, I have highlighted in the new inserted code. 
  1. @using Microsoft.AspNet.Identity  
  2. @if (Request.IsAuthenticated)  
  3. {  
  4.     using (Html.BeginForm("LogOff""Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))  
  5.     {  
  6.     @Html.AntiForgeryToken()  
  7.         <li class="btn-group nav">  
  8.             <button type="button" class="btn navbar-btn" style="background-color:forestgreen">@User.Identity.Name</button>  
  9.             <button type="button" class="btn navbar-btn dropdown-toggle" data-toggle="dropdown">  
  10.                 <span class="caret"></span>  
  11.                 <span class="sr-only">Toggle Dropdown</span>  
  12.             </button>  
  13.             <ul class="dropdown-menu" role="menu">  
  14.                 <li><a href="#">My Account</a></li>  
  15.                 <li><a href="#">View Profile</a></li>  
  16.                 <li><a href="#">Edit Profile</a></li>  
  17.                 <li><a href="#">Change Password</a></li>  
  18.                 <li><a href="#">Setting</a></li>  
  19.                 <li><a href="#">Logout</a></li>  
  20.             </ul>  
  21.         </li>  
  22.         <ul class="nav navbar-nav navbar-right">  
  23.             <li>  
  24.                 <a href="javascript:document.getElementById('logoutForm').submit()">  
  25.                     Log off  
  26.                     <span class="glyphicon glyphicon-log-out"></span>  
  27.                 </a>  
  28.             </li>  
  29.         </ul>  
  30.     }  
  31. }  
  32. else  
  33. {  
  34.     <ul class="nav navbar-nav navbar-right">  
  35.         <li>  
  36.         <a href="@Url.Action("Register", "Account")">  
  37.             <span class="glyphicon glyphicon-registration-mark"></span>  
  38.             Register  
  39.         </a></li>  
  40.         <li>  
  41.             <a href="@Url.Action("Login", "Account")">  
  42.                 <span class="glyphicon glyphicon-log-in"></span>  
  43.                 Login  
  44.             </a>  
  45.         </li>  
  46.     </ul>  

You can change the links of your menus to your specific views here. Now, run your Application. Login from an account and see what happens.
 
Working with colors

At this point, you have to work with Content/bootstrap.css file. You can change all the related colors of every thing, you want in your Application. For example: navbar color, navbar text color etc. Here, we will explain some of them. This code can change the color of the navbar.
  1. .navbar-inverse {  
  2.   background-color#000;  
  3.   border-color#eeeeee
This code can change the color of your navbar-brand.
  1. .navbar-inverse .navbar-brand {  
  2.   color#fff
This code can change the color of the brand on mouse over.
  1. .navbar-inverse .navbar-brand:hover,  
  2. .navbar-inverse .navbar-brand:focus {  
  3.   color: forestgreen;  
  4.   background-colortransparent
This code can change the way, menus look.
  1. .navbar-inverse .navbar-text {  
  2.   color#fff;  
  3.    background-color:transparent;  
  4. }  
  5.   
  6. .navbar-inverse .navbar-nav > li > a {  
  7.   color#fff;  
  8.   font-family:Arial;  
  9.   font-size:15px;  
  10.    background-color:transparent;  
  11. }  
  12.   
  13. .navbar-inverse .navbar-nav > li > a:hover,  
  14. .navbar-inverse .navbar-nav > li > a:focus{  
  15.   color: forestgreen;  
  16.     

Find your relative class and modify its properties to change the ways of looking at the things. Here is the result of my own work.

result
 
That was all for today. I hope, this article will help you and I am looking forward to the questions in comments.