How to Create Scrollable Horizontal Menu using CSS? Last Updated : 08 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto; HTML <!DOCTYPE html> <html> <head> <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> <h2>Horizontal Scrollable Menu</h2> <div class="scrollmenu"> <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> <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> </body> </html> Output Comment More infoAdvertise with us Next Article How to Create an Image Gallery with a Horizontal Scrollbar using CSS? A attardeurjita77 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create horizontal scrollable sections using CSS ? In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style. HTML Code: In this 3 min read How to Make a Div Horizontally Scrollable using CSS? Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden ele 3 min read How to create Horizontal Scroll Snap Using HTML and CSS ? In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only.Glimpse of Project Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages.HTML code:Create an HTML file (index.html).Link the CSS 2 min read How to create an image gallery with a horizontal scrollbar using CSS ? In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently 4 min read How to Create an Image Gallery with a Horizontal Scrollbar using CSS? Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to 4 min read How to Create a Custom Scrollbar using CSS? Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba 4 min read Like