Menu
I am trying to change the behaviour of the Bootstrap navbar to inherit a horizontal scroll instead of collapsing, it works on mobile but I want it to be the same across all devices... using SASS:
.navbar-nav {
li {
display: inline-block; // stops menu items from stacking
}
}
.scroll {
white-space: nowrap;
overflow-x: scroll; // scroll
-webkit-overflow-scrolling: touch;
}
Here is an image of it in mobile view, it works great:
As I increase the size of the view port and media queries kick in it completely disabled the horizontal scroll:
And finally 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 a way I can keep the x-scroll throughout the entire site? I can't pin point the CSS that is changing it's behaviour. As an added bonus I also need .navbar and .navbar-header to remain inline because that is stacking as well.
252
Set overflow-x: auto;. This will work when the viewport size its minor of width stablished.
.scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
http://jsfiddle.net/x3L06cv8/
74
Newer versions of Bootstrap make use of the flex-elements a lot and I ran into a similar challenge with Bootstrap 4.5.3, I ended up changing the CSS flex-wrap-property to nowrap.
Since the answers here are related to Bootstrap 3.3.5 (or even older), they are not useful for current Bootstrap Versions. 😔
For current versions, there is no need to convert the flex-elements (li { display: block } in this case) to inline-blocks. Depending on the CSS props, flex elements handle the children as something similar to inline-block if the CSS-prop flex-direction is row.
Reference:
Without modifying/adding CSS classes I ended up with this:
<html>
<head>...</head>
<body>
<ul class="nav text-nowrap flex-nowrap" style="overflow-x: auto;">
...
</ul>
</body>
</html>
Alternative with an additional CSS class on the nav:
HTML:
<html>
<head>
...
<style>
.flex-scroll-x {
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap;
}
</style>
</head>
<body>
<ul class="nav flex-scroll-x">...</ul>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
