How TO – Horizontal Scroll Menu

Learn how to create a horizontal scrollable menu with CSS.

Home
News
Contact
About
Support
Blog
Tools
Base
Custom
More
Logo
Friends
Partners
People
Work

Horizontal Scrollable Menu

Resize the browser window to see the effect.

Try it You

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
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;
}
</style>
</head>
<body>

<div>
<a href=”#home”>Home</a>
<a href=”#news”>News</a>
<a href=”#contact”>Contact</a>
<a href=”#about”>About</a>
<a href=”#support”>Support</a>
<a href=”#blog”>Blog</a>
<a href=”#tools”>Tools</a>
<a href=”#base”>Base</a>
<a href=”#custom”>Custom</a>
<a href=”#more”>More</a>
<a href=”#logo”>Logo</a>
<a href=”#friends”>Friends</a>
<a href=”#partners”>Partners</a>
<a href=”#people”>People</a>
<a href=”#work”>Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

</body>
</html>

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: