Some things in CSS are just, well, confusing. Here’s my code:
html, body {
margin: 0;
padding: 0;
}
.navbar {
position: sticky;
top: 0;
left: 0;
width: calc(100% - 40px);
margin: 0;
padding: 20px;
background-color: grey;
overflow-x: scroll;
}
.navbar-item {
height: 100%;
border: solid 2px black;
margin: 10px;
padding: 5px;
}<div class="navbar">
<span class="navbar-item">Home</span>
<span class="navbar-item">Bookmarklets</span>
<span class="navbar-item">Portals</span>
<span class="navbar-item">Fun Stuff</span>
<span class="navbar-item">About & Credits</span>
</div>My goal is to make the extra buttons be hidden, and should be accessible by scrolling horizontally. In the .navbar rule, I have included overflow-x: scroll;, but it doesn’t seem to have any effect on the navbar. Am I being dumb?
NOTE: I do not have access to inspect element.
>Solution :
Actually, you’re on the right track, just need to change the "wrapping" which is normal by default in the specification. See your sample below with this only change: white-space: nowrap;
html, body {
margin: 0;
padding: 0;
}
.navbar {
position: sticky;
top: 0;
left: 0;
width: calc(100% - 40px);
margin: 0;
padding: 20px;
background-color: grey;
overflow-x: scroll;
white-space: nowrap; /* 👈 only change */
}
.navbar-item {
height: 100%;
border: solid 2px black;
margin: 10px;
padding: 5px;
}<div class="navbar">
<span class="navbar-item">Home</span>
<span class="navbar-item">Bookmarklets</span>
<span class="navbar-item">Portals</span>
<span class="navbar-item">Fun Stuff</span>
<span class="navbar-item">About & Credits</span>
</div>