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
Post a Comment