Bootstrap collapsing navbar menu vertically after having centered items

Question

I have an issue with my bootstrap navbar. I recently found a way to center items in the navbar but the fact is that when the menu is collapsed these items stay horizontally aligned instead of vertically.

Here is what i have at the moment :

and the important css :

.center .nav,
 .center .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;
}

With this I have my items centered in the navbar but displayed horizontally in the collpased menu. I want to have some help to change it in order to get back the classic behaviour ( i mean vertically ) of bootstrap collapsing menu without altering the centered items when the menu is not collapsed.

vanburen · Accepted Answer

Simply apply your rules inside of a media query:

@media (min-width: 767px) {
   YOUR RULES HERE
}

See working example snippet.

@media (min-width: 767px) {
  .center .nav,
  .center .nav > li {
    float: none;
    display: inline-block;
    vertical-align: top;
  }
  .center .navbar-inner {
    text-align: center;
  }
  .center .dropdown-menu {
    text-align: left;
  }
}

Bootstrap collapsing navbar menu vertically after having centered items

Answers (2)

Related Questions