Nedas Nedas - 1 year ago 43
CSS Question

Centering navigation elements in bootstrap

I searched for the problem in other topics but none of given answers worked for me.
I have a navigation, which should have Menu1-Menu4 centered and Menu5 on the right side of the navigation.

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>

<div class="navbar-inner">
<ul class="nav navbar-nav">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li class="pull-right"><a href="#">Menu5</a></li>

.navbar .nav,
.navbar .nav > li {
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;

.navbar-inner {

Thanks for the help.

Answer Source

You could try the following for getting some menu items on the right

 <div class="navbar-collapse collapse" collapse="navbarProperties.isCollapsed">
            <ul class="nav navbar-nav">
                <li><a href="#/routeOne">Route One</a></li>
                <li><a href="#/routeTwo">Route Two</a></li>
                <li><a href="#/routeThree">Route Three</a></li>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/login">Login</a></li>
                <li><a href="#/register">Register</a></li>