Mobile Horizontal Scrollable Menu

Mobile Horizontal Scrollable Menu

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.

A website using Mobile Horizontal Scollable Menu

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 😘

Subscribe Now!

Subcribe to my newsletter and revice a lot of tips, tricks and other **** like this. 🀍

© 2020 | Alessandro De Cristofaro

🀏 Ehi, It's Me... Alessandro!
main-qimg-2a04eb0564e6d70ee4eeb60b807200ef

Iscriviti alla mia Newsletter e ricevi Tutti i Tutorial piΓΉ tanti (forse troppi) CONTENUTI SPECIALI

Subscribe to my Newsletter and Recive Now a an HUGE amount of Tips and Trick!