[Support request] Secondary navigation with horizontal scrolling on mobile

Home Forums Support [Support request] Secondary navigation with horizontal scrolling on mobile

Home Forums Support Secondary navigation with horizontal scrolling on mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1599030
    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.

    #1599078
    Elvin
    Staff
    Customer Support

    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>

    A wise man once said:
    "Have you cleared your cache?"

    #1599109
    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.

    #1599380
    David
    Staff
    Customer Support

    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.

    #1599906
    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?

    #1600054
    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.

    #1600092
    David
    Staff
    Customer Support

    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.

    #1600382
    Dorin

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

    #1600562
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.