[Support request] Secondary navigation with horizontal scrolling on mobile

Hi,

That codepen is pretty straight forward.

If you want to implement its script, you just need to replace the following:

On the script:

• Replace all $ with jQuery.
• Change all ('.item') with ('.menu-item')
• Change all ('.menu') with ('.secondary-menu')
• Change all ('.menu-wrapper') with ('.secondary-menu')

You then add a custom HTML within the same widget area that contains this:

<div class="paddles">
	<button class="left-paddle paddle hidden">
		<
	</button>
	<button class="right-paddle paddle">
		>
	</button>
</div>

Hi there,

it would require Custom development to add the ‘paddles’ to the Secondary Navigation.
You could do something like this to make the container swipeable:

.secondary-navigation .main-nav {
    overflow: auto;
    padding: 10px;  
}
#secondary-navigation .main-nav>ul {
    flex-wrap: nowrap;
    scroll-snap-type: mandatory;
    
}
.secondary-navigation .main-nav>ul li {
    scroll-snap-align: start;
    flex: 1 0 auto;
    margin: 5px;
}

Giving the secondary nav items a slightly different background color will provide a visual queue that the nav can be swiped.