THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Horizontal Scroll Menu


Learn how to create a horizontal scrollable menu with CSS.



How To Create a Horizontal Scrollable Menu

Step 1) Add HTML:

Example

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  ...
</div>

Step 2) Add CSS:

Example

div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.