Deliver User-Experience to our customers is not even so simple, but in this case, in less than 2 minutes, we can – surely – increase not only the aspect of our website, but even the livability and navigability.
In this tutorial, we’re going to create an Amazing Horizontal Mobile Scrollable Menu. This mean that instead of using a classic Hamburger menu, we’re going to put a normal in line ( ul > li ) even for Mobile User.
In some projects, personaly I love use all the 2 solution:
- Hamburger for Web Pages Menu
- Scrollable for fast Categories navigation
In the following video you can achive all you need to create your custom horizontal menu.
The CSS Code
In every case, I leave you next all the CSS code you need.
selector ul{ /* let's set the horizontal layout for our menu */
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: inherit !important;
scrollbar-width: none; /* this will remove scroll-bar for mozilla based browser */
}
selector a{ /* some graphic adjustmend for the A tag */
background: #eeeeee;
border-radius: 5px;
}
selector ul::-webkit-scrollbar { /* now, let's remove the scroll-bar from the menu */
display: none; }
If, after the editing and implementing, you’re expecting some issue or not visible-edit, simply publish the document and see the final result out of Elementor Page Builder.
For other things, just leave a comment below!
Pls dont ask me for special functions, graphic editing and similar things… do it your self 😘
