css - Bootstrap navbar x-scroll -
i trying change behaviour of bootstrap navbar inherit horizontal scroll instead of collapsing, works on mobile want same across devices... using sass:
.navbar-nav { li { display: inline-block; // stops menu items stacking } } .scroll { white-space: nowrap; overflow-x: scroll; // scroll -webkit-overflow-scrolling: touch; }
here image of in mobile view, works great:
as increase size of view port , media queries kick in disabled horizontal scroll:
and on desktop:
html:
<div class="navbar-header"> <a class="navbar-brand" href="#"><i class="fa fa-home"></i></a> </div> <ul class="nav navbar-nav scroll"> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret hidden-xs"></span></a> ... </li> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> <li><a href="#">hyperlink</a></li> </ul>
is there way can keep x-scroll throughout entire site? can't pin point css changing it's behaviour. added bonus need .navbar , .navbar-header remain inline because stacking well.
set overflow-x: auto;
. work when viewport size minor of width stablished.
.scroll { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
Comments
Post a Comment