Scribd
Upload
390 views

Horizontal Scroll Navigation Using HTML CSS

This document provides instructions for creating a horizontal scrolling navigation menu using only HTML and CSS. It includes code snippets for the HTML and CSS needed to build the menu. The menu items are placed within a fixed-width container, with overflow set to auto so that the items can be scrolled left and right on desktop using arrow keys or by swiping on mobile. Styling is applied using CSS for elements like the container, header, logo, and menu items. Comments are included in the code to explain the purpose of each section.

Uploaded by

Jaka taruna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
390 views

Horizontal Scroll Navigation Using HTML CSS

This document provides instructions for creating a horizontal scrolling navigation menu using only HTML and CSS. It includes code snippets for the HTML and CSS needed to build the menu. The menu items are placed within a fixed-width container, with overflow set to auto so that the items can be scrolled left and right on desktop using arrow keys or by swiping on mobile. Styling is applied using CSS for elements like the container, header, logo, and menu items. Comments are included in the code to explain the purpose of each section.

Uploaded by

Jaka taruna
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Horizontal Scroll Navigation Using HTML

CSS | Scrolling Menu Bar

How we can create a scrolling navigation bar using HTML and CSS? Solution:
Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.

Previously I have shared some types of Navbar, But this is different from others.
This menu has more content than its width, and all extra overflow materials are
hidden. We can access all the items by scrolling left or right, but I have disabled
the scrollbar. Now you can scroll using left and right arrow keys and in the phone,
you can slide easily.

Today you will learn to create a Horizontal Scrolling Menu Bar with Pure CSS &
HTML. In this menu, you have scroll left or right to see all the menu items. There are
no navigation buttons for PC users, they have to scroll by pressing buttons on
the keyboard. We also can add buttons but for that JavaScript is required, but I
want to create with Pure CSS.

So, Today I am sharing Horizontal Scroll Navigation Using HTML CSS. This
menu bar has a minimal design, some nav items with a fixed logo. You can use this
on your website after some customization. If you want then you can show the scroll
bar, I have hidden that element using CSS command.
If you are thinking now how this Scrolling Menu Bar actually is, then see
the preview given below.

Preview Of Horizontal Scrolling Menu Bar


See this video preview to getting an idea of how this menu looks like.

Video Player
00:00
00:08

Live Demo
Now you can see this visually, there also a button above for seeing it live. If you like
this, then get the source code of its.

You May Also Like:

 CSS Outline Styles


 HTML CSS Pagination Design
 3D Cube Carousel
 Custom Stylish Select Option

Horizontal Scroll Navigation Using


HTML CSS Source Code
Before sharing source code, Let’s talk about it. First I have created a main div and
placed all the nav item inside it. For creating horizontal scrolling I have put max-
height to hide some elements. And put box-sizing: border-box; in all the elements
using CSS * selector (info). After that, for creating scrolling effect used overflow-
x: auto; X for horizontal scrolling only.
For hiding the scroll bar I have used .scroll::-webkit-scrollbar {display: none;} , you
can visible the scroll bar by removing this line. There are left many basic CSS
properties like display, align, text, etc. I can explain all in writing, you will understand
easily after getting the codes.
For creating this menu you have to create only 2 files, one for HTML and one
for CSS. Follow the steps to creating this without any error.
index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

1 <!DOCTYPE html>
2 <!--Code By Webdevtrick ( https://webdevtrick.com )-->
3 <html lang="en" >
4 <head>
5 <meta charset="UTF-8">
6 <title>Horizontal Scroll Nav | Webdevtrick.com</title>
7
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body>
12
13 <div class="container nav">
14 <div class="info">On desktop control with left and right keys</div>
15 <header class="nav-header">
16 <span class="logo"><img src="http://pngimg.com/uploads/google/google_PNG19644.png"></span>
17 <nav class="middle scroll">
18 <span class="item">Home</span>
19 <span class="item">About</span>
20 <span class="item">Portfolio</span>
21 <span class="item">Pricing</span>
22 <span class="item">Services</span>
23 <span class="item">Contact</span>
24 <span class="item">Blog</span>
25 <span class="item">Help</span>
26 </nav>
27 </header>
28 </div>
29
30 </body>
31 </html>

style.css

Now create a CSS file named ‘style.css‘ and put the codes given here.

1 /** Code By Webdevtrick ( https://webdevtrick.com ) **/


2 *{
3 box-sizing: border-box;
4 user-select: none;
5 }
6 body {
7 max-width: 760px;
8 margin: 10vmin auto 0;
9 color: #fff;
10 line-height: 1.5;
11 }
12 .info{
13 text-align: center;
14 font-size: 24px;
15 color: #212121;
16 text-transform: capitalize;
17 }
18 .nav-header .logo {
19 width: 25%;
20 }
21 .nav-header nav {
22 width: 75%;
23 }
24 header {
25 background: #212121;
26 }
27 .nav-header {
28 border-radius: 5px;
29 }
30 .logo {
31 text-align: center;
32 border-right: 1px solid #4d4d4d;
33 padding: 12px 24px 13px;
34 }
35 .logo img {
36 width: 100%;
37 display: inline-block;
38 vertical-align: middle;
39 }
40 .item {
41 padding: 12px 16px 13px;
42 }
43 .item:not(:last-child) {
44 border-right: 1px solid #7e7e7e;
45 }
46 header,
47 nav {
48 font-size: 0;
49 }
50 .item {
51 font-size: 24px;
52 }
53 .logo,
54 .item,
55 .middle {
56 display: inline-block;
57 vertical-align: middle;
58 }
59 .scroll {
60 white-space: nowrap;
61 overflow-x: auto;
62 -webkit-overflow-scrolling: touch;
63 -ms-overflow-style: -ms-autohiding-scrollbar;
64 }
65 .scroll::-webkit-scrollbar {
66 display: none;
67 }
68 @media (max-width: 765px) {
69 .item {
70 font-size: 14px;
71 }
72 }
That’s It. Now you have successfully created Horizontal Scrolling Navigation Using
HTML CSS, Scroll Menu Bar. If you have any doubt or question comment down
below.

You might also like