Cómo crear un menú centrado en Bootstrap Navbar

Puedes crear un menú de navegación superior de forma sencilla con Bootstrap. Por regla general, el menú suele estar alineado o bien a la derecha, o bien a la izquierda de la barra de navegación. Booststrap te proporciona una manera sencilla de controlar la alineación del menú. Para alinear el texto o los enlaces del menú en Bootstrap Navbar, tendrás que utilizar navbar-nav, navbar-left o navbar-right.

Sin embargo, en ocasiones y por exigencias del guión, debes alinear los enlaces del menú en el centro de la barra de navegación. Desgraciadamente, Bootstrap no tiene ninguna clase para poder alinear los elementos del menú en el centro de la barra. En este tutorial, te mostraremos cómo cambiar la posición del menú o centrarlo en Bootstrap Navbar.

Antes que nada, debemos incluir las librerías de Bootstrap para crear la barra de navegación.

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

Código HTML

El siguiente HTML crea una navbar con Bootstrap. El menú se podrá colocar en tres posiciones distintas: izquierda (left), derecha (right) y centro (center). Añade la clase personalizada navbar-center para centrar el menú.

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

Código CSS

El siguiente CSS nos servirá para alinear al centro los elementos que integran nuestra barra de navegación.

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}