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.

https://webdevtrick.com/wp-content/uploads/horizontal-scrolling-menu-bar.mp4?_=1

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.

style.css

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

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.

Thanks For Visiting, Keep Visiting.