[Resolved] 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.

Try this CSS:

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

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.