CSS overflow is being ignored in navbar

April 24, 2023

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>