Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Scrollable Horizontal Menu using CSS ?

  • Last Updated : 16 Dec, 2021

In this article, we are going to implement a Scrollable Horizontal Menu using CSS.

Approach: Scrollable Horizontal Menu is used to scroll the horizontal navbar using CSS “overflow:auto” and “white-space: nowrap”. These two attributes are used to scroll the horizontal menu.

To implement the scrollable horizontal menu

  1. You have to add HTML.
  2. You have to add CSS to the code.

Example: In the below example, we have used CSS properties “overflow : auto” and “white-space : nowrap”. 

HTML




<!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>
    <center>
       <h1 style="color:green">GeeksforGeeks</h1>
    </center>
    <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>
    </div>
</body>
</html>

Output:

Scrollable Horizontal Menu


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!