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: enter image description here

as increase size of view port , media queries kick in disabled horizontal scroll:

enter image description here

and on desktop:

enter image description here

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; } 

http://jsfiddle.net/x3l06cv8/


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -