How can I center a logo and place the links left and right on the navbar using bootstrap?


Tags: jquery,html,css,twitter-bootstrap

Problem :

I am creating a navbar with bootstrap. I want the logo to be in the center and the 4 links left and right of the logo. This is how I far I got, but it breaks when the navbar tries to collapse. Please help me out with the collapsing-part.

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div id="container">
            <div id="navbar-header pull left">
                <a id="brand" class="navbar-brand">JG</a>
            </div>
            <div class="navbar-header pull-right">
                <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-left">
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS:

.navbar-brand{
    position: absolute;
    width:100%;
    left:0;
    top:0;
    text-align: center;
    margin: auto;
    float:none;
}
#listright{
    float:right !important;
}
#listleft{
    float:left !important;
}


Solution :

This works with bootstrap 3.2

HTML

    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand navbar-brand-centered">Brand</div>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-brand-centered">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>               
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

CSS

@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: #eee;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
}

Disclaimer: This is not my solution, found here, but in case it disappears. :)


    CSS Howto..

    how to reduce the size of all component in sencha application

    How to access smarty variable in css URL attribute?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    how can i change the following cs into one CSS CLASS

    How to make input and select to be same width in css

    how to use css to display multiple posts in inline-block like google+

    How do I avoid 'bottom-aligned' labels with inline associated inputs?

    How do I change phpmyadmin font size for sql query box?

    How to make sure Text always stays on top of Image (even when resizing)?

    How to insert FontAwesome inside Select2

    How I can set a different font size for my text by css?

    How to separate content and presentation layers on JSPs?

    How to overflow in CSS/HTML? [closed]

    How to move an image up and down smoothly with CSS?

    How to use JavaScript to Alter CSS for Multiple Elements

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    How to make divs float on both ends of another div?

    CSS - How to line up buttons?

    How to remove Firefox's button outline when mouse press, not click, hover or forcus

    how can i add style with CSS to