Mobile menu - horizontal and scrollable

Hi there,

If the menu didn't have sub menus then it would be possible with some CSS.
But the method relies on the container using overflow hidden, which would mean the sub menus would not be visible.
In addition to this there is the tap target to open the sub menus on mobile, which may conflict with the touch scroll.

So short answer - we don't have a solution for that, it would require custom development.

I see what you mean.

I am keen to simplify my menu and only have categories but no submenus.

May I try the css code and see how ot works?

Try this CSS:

.main-navigation .main-nav>ul>li {
    flex-shrink: 0;
}
.main-navigation .main-nav>ul {
    flex-wrap: nowrap;
    overflow-x: scroll;
}

Hello, Ying tried this and it worked!

Is it possible to style it so that each category is separated from the next one with a vertical line (os they appear boxed in) so as they are separated. Each menu category consists of 3 words and I fear they fuse together in a big line. Lastly, how can I change the left / right padding for the scrollable menu?

Hello there,

You can try adjusting Ying’s CSS code to something like this:

.main-navigation .main-nav>ul>li {
    flex-shrink: 0;
}

.main-nav > ul.menu > li:not(:last-of-type) > a:after {
    content: "|";
    padding-left: 20px;
}

.main-navigation .main-nav>ul {
    flex-wrap: nowrap;
}

.main-navigation .main-nav>ul>li:nth-of-type(1) {
    padding-left: 40px;
}

.main-navigation .main-nav>ul>li:last-of-type {
    padding-right: 40px;
}

div#primary-menu {
    overflow-x: scroll;
}

I set the padding-left of the divider to 20px so that it looks aligned in relevance to the current menu item width you have.

You can also modify 40px to alter the padding of the scrollable menu.

Kindly let us know how it goes.

Many thanks works really well

I adjusted the padding left to 10px but the vertical divided is not aligned in the midpoint

Actually it looks really good will leave it as it is. Many thanks :)

Glad that worked! You’re welcome! :)

Apologies for the follow up, I just notice that when I select the last option on mobile on the new page the menu height increases ad the options appear over 2 lines?

EDIT

I managed to correct it I think by removing the vertical divider - it now works fine and looks well so I will leave it as it is:)

I see. Glad you got it to work!

I do apologize for the follow up question.

I see on mobile there is a scroll bar , that looks great.

Is it possible not to have the scroll bar on desktop as it looks too prominent?

Try adding this CSS:

@media(pointer: fine) {
    #primary-menu::-webkit-scrollbar {
        height: 0;
    }
}

Many thanks David that works!

Awesome - glad to hear that