javascript - How to add new button navbar view Mobile only (using bootstrap) -
i want create new menu new button view in screen mobile http://i.stack.imgur.com/zmqjq.png , menu hide if screen not mobile
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle btn-sociall pull-left" data-toggle="collapse" data-target=".navbar-social"> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> <div class="collapse navbar-collapse navbar-social"> <ul class="nav navbar-nav navbar-social"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> this code retrun http://i.stack.imgur.com/f0eje.png
this answer there better way. used class hidden.
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle btn-social pull-left" data-toggle="collapse" data-target=".navbar-social"> <span class="icon-social"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> <div class="collapse hidden navbar-collapse navbar-social "> <ul class="nav hidden navbar-nav navbar-social "> <li><a href="#"><span class="menu-social menu-facebook"></span>facebook</a></li> <li><a href="#"><span class="menu-social menu-twitter"></span>twitter</a></li> <li><a href="#"><span class="menu-social menu-linkedin"></span>linkedin</a></li> <li><a href="#"><span class="menu-social menu-skype"></span>skype</a></li> <li><a href="#"><span class="menu-social menu-googleplus"></span>googleplus</a></li> <li><a href="#"><span class="menu-social menu-youtube"></span>youtube</a></li> <li><a href="#"><span class="menu-social menu-share"></span>share</a></li> <li><a href="#"><span class="menu-social menu-rss"></span>rss</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> and add code javascript
$(function() { if(($(window).width() <= 767)) { $(".navbar-social").removeclass('hidden'); } });
try adding class visible-xs.
that's visible/hidden-(screensize), yes, can combine them: hidden-sm hidden-md hidden-lg work, too.
so change (starts on 2nd line):
<div class="navbar-header"> ... </div> to
<div class="navbar-header visible-xs"> ... </div>
Comments
Post a Comment