Table of Contents
  • The top navigation menu bar is created easily with Bootstrap. Generally, the menu is aligned to the left or right side of the highest navigation bar. Bootstrap provides a simple thanks to control the menu alignment. To align the text or menu links in Bootstrap navbar, navbar-nav and navbar-left or navbar-right are used.
  • However, sometimes it requires aligning menu links within the center of the navbar. But Bootstrap doesn’t have any class for center alignment. During this tutorial, we’ll show how you’ll change the position of menu or text to center within the Bootstrap navbar.
  • The Bootstrap libraries need to be included first to make navigation bar with Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML Code

The following HTML creates a navbar with Bootstrap. The menu is going to be placed in three different positions, left, right, and center. Add the custom defined class named navbar-center to align menu center.

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Left</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-center">
            <li><a href="#">Center 1</a></li>
            <li><a href="#">Center 2</a></li>
            <li><a href="#">Center 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
        </ul>
    </div>
</nav>

CSS Code

The following CSS code of the navbar-center class will align the menu or text content to the middle position in Bootstrap navbar.

.navbar-nav.navbar-center {
    Position: absolute;
    Left: 50%;
    Transform: translatex(-50%);
}

Our example code aligns the menu in three positions on Bootstrap navbar just like the below.

 

Categorized in:

Adobe Illustrator,

Tagged in:

, ,