[Resolved] Horizontal secondary nav on mobile

Home Forums Support Horizontal secondary nav on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #978999
    David

    Hello

    Is it possible to change how the secondary menu works on mobile? so it works like this…

    https://codepen.io/osvaldas/pen/xWNLXy

    Thanks
    Dave

    #979126
    David
    Staff
    Customer Support

    Hi there,

    would require custom development – the best i can do is:

    1. Use only the JS that the Codepen provides.
    2. Replace the first part of the JS ie.

    const container = document.querySelector('.tabs')
    const primary = container.querySelector('.-primary')
    const primaryItems = container.querySelectorAll('.-primary > li:not(.-more)')
    container.classList.add('--jsfied')

    with this:

    const container = document.querySelector('.secondary-navigation .inside-navigation .main-nav')
    const primary = container.querySelector('.secondary-menu')
    const primaryItems = container.querySelectorAll('.secondary-menu > li:not(.-more)')
    container.classList.add('--jsfied')

    Then add this CSS:

    @media (max-width: 768px) {
        #secondary-navigation .menu-toggle {
            display: none;
        }
        #secondary-navigation ul {
            display: block;
        }
    }
    
    .secondary-navigation .inside-navigation .main-nav {
        position: relative;
    }
    
    .secondary-navigation .inside-navigation .main-nav:not(.--jsfied) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .secondary-navigation .inside-navigation .main-nav .--hidden {
        display: none !important;
    }

    Should get you somewhere in the right area.

    #979152
    David

    Thanks David – It’s start to work on Tablet but then goes back to normal menu on mobile? any ideas?

    #979162
    David
    Staff
    Customer Support

    I made an edit to the CSS above – give that a go.
    Quite happy to see that it works!

    #979182
    David

    Working great David – one last thing, any idea how I can get the more sub links so they sit to the right and don’t go off the page? also, how do I get the arrow transition to work like it does on the codepen demo?

    #979196
    David
    Staff
    Customer Support

    Awesome – that was easier then expected 🙂
    You can change the Drop Down direction in the Customizer > Layout > Primary Navigation.
    Whilst you’re there can you change the Navigation Dropdown to Click Menu Item – ill then take a look at how to flip the arrow on click.

    #979210
    David

    I’ve changed Drop Down direction to Right and Navigation Drop-Down to Click Menu item, but it doesn’t seem to work now.

    #979219
    David
    Staff
    Customer Support

    Can you put it back to hover and ill see if there is an alternative method.

    #979227
    David

    I’ve changed back David.

    #979245
    David
    Staff
    Customer Support

    Try adding this CSS:

    .secondary-navigation .inside-navigation .main-nav:not(.--show-secondary) .-secondary {
        display: none !important;
    }
    
    .secondary-navigation .inside-navigation .main-nav li.-more button span {
        display: inline-block;
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
    }
    
    .secondary-navigation .inside-navigation .main-nav.--show-secondary li.-more button span {
        transform: rotateX(180deg);
        -webkit-transform: rotate(180deg);
    }
    .dropdown-hover .secondary-navigation:not(.toggled) ul li:hover>ul {
        right: 0;
    }
    #979252
    David

    That’s perfect 🙂 Thanks so much David, great help as always!

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