Grow your CSS skills. Land your dream job.

Bootstrap: Full-width navbar with centered menu items

  • Q_A
    # June 12, 2013 at 12:34 pm

    A quick Bootstrap tutorial for those wanting a navbar that will span the entire width of the page at any screen size and align the menu items to the center.

    **1. Reset The BODY Padding.**

    body {
    padding: 0px;
    }


    **2. Specify Centering Styles.**

    .center {
    margin-left: auto;
    margin-right: auto;
    }
    .center.navbar .nav,
    .center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    }
    .center.navbar-inner {
    text-align:center;
    }
    .center .dropdown-menu {
    text-align: left;
    }
    .navbar-inner {
    margin: 0 auto;
    }


    **3. Call Centering Styles.** Use ‘navbar-static-top’ OR ‘navbar-fixed-top’ depending on your needs. Center both this DIV and the DIV inside it having the class ‘navbar-inner’ as shown below. Scale your browser window to test the layout.


    **4. Add Your Own Padding.**
    In my case I padded the container classes because my navbar resides outside of a container DIV and all of my content resides inside containers.
    You can use media queries to specify different amounts of padding for different screen widths.

    @media (max-width: 767px) {
    .container,.container-fluid {
    padding-left: 10px;
    padding-right: 10px;
    }}


    ※ Since these styles are designed to override styles in bootstrap.css and bootstrap-responsive.css be sure to link your stylesheet after those.

    (Bootstrap v2.3.2, JQuery v1.7.2)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".