How to Override/Undo CSS Class Attributes for Twitter Bootstrap

Question

About a year ago, @Andres Ilich provided a beautifully elegant answer to centering the navigation bar in Bootstrap. An excerpt from the posted answer is below:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

And then you can target the .center class like so:

.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;
}

Since this affected the drop down menu as well, he added this:

.center .dropdown-menu {
    text-align: left;
}

So that the drop down menus would behave normally.

Now I am facing a similar issue. The navigation bar is beautifully centered. Dropdowns work great. But, when you get into tablet and mobile viewports, the mobile menu also gets centered. Simply aligning the text to the left does not solve the issue since each unordered list item needs its own line.

I have been trying to figure out a way where I could simply add a class inside a media query that would undo this, but I haven't been able to find a solution.

Refer to this jsFiddle to see what I am talking about: http://jsfiddle.net/persianturtle/rAYyk/2/

My question: Is there a simple way (<50 lines of code) to undo the above code inside a media query so this navigation menu would be centered desktop view and displayed as normal on tablets and phones?

If this cannot be done with pure CSS, can a step-by-step explanation of how a jQuery solution would work? Since I have h5bp, I already have jQuery 1.9.0 linked in.

Answer 1

If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file.

This is where the @media queries are located that perform the "responsive design" and stylize the tablet and mobile viewports.

@media (max-width: 979px) { 
    .center .navbar-inner {
        text-align:left !important;
    }
    .center.navbar .nav > li{
        display:block !important;
    }
}