javascript - How to Override/Undo CSS Class Attributes for Twitter Bootstrap -



javascript - How to Override/Undo CSS Class Attributes for Twitter Bootstrap -

about year ago, @andres ilich provided beautifully elegant reply centering navigation bar in bootstrap. an excerpt posted reply below:

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

and can target .center class so:

.center.navbar .nav, .center.navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 prepare */ *zoom:1; /* haslayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align:center; }

since affected drop downwards menu well, added this:

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

so drop downwards menus behave normally.

now facing similar issue. navigation bar beautifully centered. dropdowns work great. but, when tablet , mobile viewports, mobile menu gets centered. aligning text left not solve issue since each unordered list item needs own line.

i have been trying figure out way add together class within media query undo this, haven't been able find solution.

refer jsfiddle see talking about: http://jsfiddle.net/persianturtle/rayyk/2/

my question: there simple way (<50 lines of code) undo above code within media query navigation menu centered desktop view , displayed normal on tablets , phones?

if cannot done pure css, can step-by-step explanation of how jquery solution work? since have h5bp, have jquery 1.9.0 linked in.

if you'd create css alter affects tablet , mobile viewports, can add together css overrides need in bootstrap-responsive.css file.

this @media queries located perform "responsive design" , stylize tablet , mobile viewports.

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

javascript jquery css twitter-bootstrap

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -