Customizing Navbar In MVC 5 With Bootstrap

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.