Horizontal Scrollable Menu

Hello coders,

In this article, you will learn to create a responsive horizontal scroll menu using HTML CSS. Copy and paste the below code. The trick to making the navbar scrollable is by using  overflow:auto  and  white-space: nowrap

HTML Code:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Horizantal Scroll menu by codeithub </title>
</head>
<body>
    <div class="scrollmenu">
        <a href="#home">Home</a>
        <a href="#about">About Us</a>
        <a href="#contact">Contact</a>
        <a href="#image">Image</a>
        <a href="#support">Support</a>
        <a href="#blog">Blog</a>
        <a href="#places">Places</a>  
        <a href="#theme">Themes</a>
        <a href="#nature">Nature</a>
        <a href="#more">More</a>
        <a href="#country">Country</a>
        <a href="#friend">Friend</a>
        <a href="#partner">Partner</a>
        <a href="#people">People</a>
        <a href="#Group">Group</a>
      </div>
      <div class="image">
        <img src="natureimg.jpg" alt="Nature" class="responsive">
      </div>
</body>
</html>

CSS Code:

<!-- code by CodeitHub ( https://CodeitHub.com ) -->
.responsive {
    width: 100%;
    height: auto;
}
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}
div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
}
div.scrollmenu a:hover {
    background-color: rgb(128, 122, 126);
}

OUTPUT

See also  Basic Sidebar Navigation With Pure CSS

More Examples:

Glow Text

Image 3D Sliders using HTML AND CSS

How to create Hamburger menu animation

Leave a Reply

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