Last year, @Andres Ilich shared a remarkably elegant solution for centering the navigation bar in Bootstrap. Here is an excerpt from the answer he posted: Visit here for more details.
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
He also provided CSS code to target the .center class effectively:
.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;
}
To maintain normal behavior of dropdown menus, he included this additional snippet:
.center .dropdown-menu {
text-align: left;
}
However, a similar issue arises when viewing the site on tablet and mobile devices - the mobile menu is also centered. Aligning the text to the left doesn't fully resolve this as each list item needs its own line.
I have been attempting to find a way to address this within a media query by adding a new class, but so far no luck.
You can see the issue demonstrated on this jsFiddle link: http://jsfiddle.net/persianturtle/rAYyk/2/
My inquiry: Is there a straightforward method (less than 50 lines of code) to counteract the previous centered alignment inside a media query, ensuring that the navigation stays centered on desktops but displays normally on tablets and phones?
If achieving this solely with CSS proves challenging, could you provide a detailed walkthrough of how a jQuery solution would be implemented? I already have jQuery 1.9.0 linked into my project due to using h5bp.