Horizontal secondary nav on mobile

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

I’ve changed back David.

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

Glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts