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=/proxy/https/www.w3schools.com/howto/"#home">Home</a>%3Cbr> <a
href=/proxy/https/www.w3schools.com/howto/"#news">News</a>%3Cbr> <a href=/proxy/https/www.w3schools.com/howto/"#contact">Contact</a>%3Cbr> <a
href=/proxy/https/www.w3schools.com/howto/"#about">About</a>%3Cbr> ...
</div>
Step 2) Add CSS:
The trick to make the navbar scrollable is by using overflow:auto and white-space: nowrap:
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.
