Horizontal secondary nav on mobile

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.

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

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

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?

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.

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

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

I've changed back David.

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;
}

That's perfect :) Thanks so much David, great help as always!

Glad to be of help.