html - twitter bootstrap - moving objects to navbar when collapsed bootstrap 3 -
i got topnavbar disappears when website gets loaded on mobile device content on topnavbar appear on collapsed main navigation.
collapsed navigation how able achieve or possible or have create class specially collapsed menu? thank in advance
what following:
1) create top-menu
container big devices
2) create same menu in collapse container small devices
3) use css , @media
switch between 2 lists
<header> <div class="container"> <!-- top menu not mobile devices --> <div id="top-menu" class="clearfix"> <ul class="nav navbar-nav"> <li> <a href="#"> topitem1 </a> </li> <li> <a href="#"> topitem2 </a> </li> </ul> </div> <!-- navigation bar --> <div class="navbar navbar-default"> <div class="navbar-header"> <!-- toggle menu --> <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- logo --> <a class="navbar-brand" href="/nl/"> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> item1 </a> </li> <li> <a href="#"> item2 </a> </li> <li> <a href="#"> item2 </a> </li> </ul> <!-- same top menu links small devices --> <ul class="nav navbar-nav navbar-right" id="top-responsive"> <li> <a href="#"> topitem1 </a> </li> <li> <a href="#"> topitem2 </a> </li> </ul> </div> </div> </div> </header>
css:
standard css style:
#top-responsive { display: none; } #top-menu { display: block; }
with @media
small devices:
@media (max-width: 767px) { #top-responsive { display: block; } #top-menu { display: none; } }
jsfiddle: http://jsfiddle.net/vdesign/qyosv002/
edit:
like vicente said, bootstrap provides utility classes same thing do. can find intell on website of bootstrap: http://getbootstrap.com/css/#responsive-utilities
Comments
Post a Comment