Connect with us

How to Create Simple Menu With Horizontal Scrollbar

How To

How to Create Simple Menu With Horizontal Scrollbar

How To Create Simple Menu With Horizontal Scrollbar
(Last Updated On: May 14, 2023)

Do you want to create a simple menu with a horizontal scrollbar? You’re in the right place. In this tutorial, I will guide you step-by-step on how to create.

You want to show lot of items (tabs) horizontally on your menu, but because of the space limitation you can’t and have to reduce the menu items.

If you want to show all your menu items horizontally by any mean, there is a very simple solution, put a horizontal scrollbar, so that one can easily move the bar left and right to see all the menu items.

This is how the menu will look like with the horizontal scrollbar. The horizontal bar appears only when your menu items will exceed the maximum width of menu.

A simple menu with horizontal scrollbar

Put this code on your website, and update the menu-item links and text.

<style> {
background-color: brown;
overflow: auto;
white-space: nowrap;
} a {
display: inline-block;
padding: 14px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
font-weight: bold;
} a:hover {
background-color: crimson;
color: white;

<!-- Menu Starts Here -->

<div class="menu">
<a href="">Home</a>
<a href="#">How To</a>
<a href="#">About</a>
<a href="#">Blogger Tutorials</a>
<a href="#">Windows Tutorials</a>
<a href="#">Entertainment</a>
<a href="#">Technology</a>
<a href="#">Sports</a>
<a href="#">Travel</a>
<a href="#">Earn Online</a>
<a href="#">Ideas</a>
<a href="#">Opinions</a>


<!-- Menu Ends Here -->

So it was all about how to create a simple menu with horizontal scrollbar. Hope you would have liked this tutorial. If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

Download Website themes

Also Read

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, creating TikToks(@iammeerbasit), watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in How To

To Top