The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Bootstrap: Full-width navbar with centered menu items

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #45474

    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 {
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    .center.navbar-inner {
    .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)
  • The forum ‘CSS’ is closed to new topics and replies.