css - Style Twitter bootstrap Navigation -
how people typically style output of twitter bootstrap collapsible navigation?
the standard structure follows.
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="brand">project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
for example, if style .nav li a
, can css selector, changes styling of mobile navigation. bootstrap doesn't appear add useful combination of classes denote different ones.
<div class="nav-collapse collapse"> <!-- closed button --> <div class="nav-collapse on collapse"> <!-- open button --> <div class="nav-collapse on collapse"> <!-- closed resizing window > mobile -->
i find myself having implement bootstrap styles again mobile version because can't seem find combination of classes allows me style main nav rather dropdown. example, dropdown can styled .nav-collapse.on
this simple thing can't seem work out!
i have delt issue myself , there range of solutions.
in order put them like:
- involved worth it - have switched workflow involves building bootstrap. i'm using bootsrap-sass compass , grunt etc. handles task of minifying, concatenating etc, , in case changes want _variables.scss or .less etc..
- cheap effective - have used simple hack make second menu , add .hidden-phone, .visible-desktop etc.. allows make unique touch buttons , maybe forgo collapse. kinda here (it's not bootstrap same concept)
- media queries - last css in list responsive.scss or file full of media queries, way can change whatever want override done before whichever device.
Comments
Post a Comment