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

Next, follow the picture, given below.

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.

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

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

.navbar-brand {
  float: left;
  padding: 15px 15px;
  font-size: 40px;
  line-height: 20px;
  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.

<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 the 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, and add the highlighted code. (You can find the code something like this, it might be different). You can also assign the icons from the glyph icon class. Refer to the code, given below.

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="@Url.Action("Index", "Home")">
                <span class="glyphicon glyphicon-home"></span>
                Home
            </a>
        </li>
        <li>
            <a href="@Url.Action("Contact", "Home")">
                <span class="glyphicon glyphicon-search"></span>
                Contact
            </a>
        </li>
        <li>
            <a href="@Url.Action("About", "Home")">
                About
            </a>
        </li>
        <li>
            <a href="@Url.Action("Search", "Home")">
                Search
            </a>
        </li>
    </ul>
    @Html.Partial("_LoginPartial")
</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.

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()
        <li class="btn-group nav">
            <button type="button" class="btn navbar-btn" style="background-color:forestgreen">@User.Identity.Name</button>
            <button type="button" class="btn navbar-btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">My Account</a></li>
                <li><a href="#">View Profile</a></li>
                <li><a href="#">Edit Profile</a></li>
                <li><a href="#">Change Password</a></li>
                <li><a href="#">Setting</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="javascript:document.getElementById('logoutForm').submit()">
                    Log off
                    <span class="glyphicon glyphicon-log-out"></span>
                </a>
            </li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="@Url.Action("Register", "Account")">
                <span class="glyphicon glyphicon-registration-mark"></span>
                Register
            </a>
        </li>
        <li>
            <a href="@Url.Action("Login", "Account")">
                <span class="glyphicon glyphicon-log-in"></span>
                Login
            </a>
        </li>
    </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 the Content/bootstrap.css file. You can change all the related colors of everything, 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.

.navbar-inverse {
    background-color: #000;
    border-color: #eeeeee;
}

This code can change the color of your navbar brand.

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

This code can change the color of the brand on mouseover.

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: forestgreen;
  background-color: transparent;
}

This code can change the way, menus look.

.navbar-inverse .navbar-text {
  color: #fff;
  background-color: transparent;
}

.navbar-inverse .navbar-nav > li > a {
  color: #fff;
  font-family: Arial;
  font-size: 15px;
  background-color: transparent;
}

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

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

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