[Support request] Secondary navigation with horizontal scrolling on mobile

[Dorin]

Hey guys,

So I’m using the secondary navigation to move through my image galleries. It looks good on desktop, but having many galleries, the menu breaks down on at least 2 rows on mobile (surely 3 or 4 rows if I add more) – I don’t want to use the collapse mobile version, so I’ve disabled that. Now I’m looking to keep the secondary nav on a single row that scrolls horizontally with chevron left and right arrows. Also, I would like to make it sticky. I’ve found a similar topic, but I’m having problems implementing it. Ideally, I would go for something like this (without the borders, just plain white with chevron left and right arrows instead of the unicode ones).

Any help is greatly appreciated. Thank you.

[Elvin]

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>

[Dorin]

Hi Elvin. Thanks for the quick response. I changed the classes in the script (created a Hook Element in wp_footer) and also in the css. Where do I add the HTML? I don’t have any widget for the second navigation. By the way, can’t this be done solely with css? Found this article that explains it. Couldn’t get it to work though. And then there’s the arrows that need to be put in there.

[David]

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.

[Dorin]

Hi David,

It’s working, thank you so much.

Regarding the background color, I’d like to keep the design as it is. So I’m wondering if it’s possible to add a text/ an empty menu item on the left, just before the first gallery (new), that says “portfolio >” and make that stick horizontally. It could be a good indicator for the user to scroll. Much like here – the nav only scrolling version.

Also, is there a way to prevent the menu going back to the start once an item that’s further away is clicked?

[Dorin]

Hi again David,

Managed to implement the arrows on mobile for a better ux using this code. I’m not 100% sure I did it the right way (left a link in the private info area if you want to take a look). Still not sure how to make the menu not scroll back to the beginning once a menu item is clicked.

[David]

Not easy to do that, as the somehow you would need to store the scroll position when a link is clicked and then reposition the scroll box on page load…. i wouldn’t know where to begin with that JS requirement – its something that you may find an answer for on stackoverflow. Sorry.

[Dorin]

That’s alright, David. Your help is much appreciated.

[David]

You’re welcome

[Author]

Posts