PUBLISHED ON: AUGUST 6, 2021
How to create a horizontal scrollable menu with CSS?
We mostly see a horizontal menu at the top of the page. This menu contains a list of links to navigate to other pages. The horizontal menu is good for bigger screen sizes but when the screen gets smaller, it is difficult to fit them. So here we learn to add horizontally scrollable to the menu with CSS.
Create horizontal scrollable menu
To create a horizontal menu first take a div container and add links to it then add CSS property to customize the menu like background-color, text-decoration, padding, margin etc. To add horizontal scroll use overflow: auto and white-space: nowrap . The over-flow: auto will add horizontal scrolls when the contents overflow the container and white-space:nowrap will not allow to wrap it to the next column.
Example: Creating horizontal scrollable menu
In this example, we will be adding a horizontal scroll to the menu using the CSS property. Additionally, we have added width to the container to create a smaller size of the menu for horizontal scroll.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
background-color: #cccccc;
overflow: auto;
white-space: nowrap;
width: 250px;
}
a {
display: inline-block;
text-decoration: none;
text-align: center;
padding: 12px;
font-size: 20px;
}
a:hover{
background-color: green;
}
</style>
</head>
<body>
<h2> Horizontal Scrollable menu </h2>
<div class="container">
<a href="#">Menu </a>
<a href="#">pages </a>
<a href="#">study</a>
<a href="#">contact </a>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating a horizontal scrollable menu
Here is another example of the horizontal scrollable menu.
Conclusion
In this tutorial, we have learned to create a horizontal scroll menu with CSS. The overflow: auto and white-space: nowrap property is used to do so. It has been explained with examples.
