How to create a Mobile Only Touch Responsive Sliding Menu?

Hi there,

Is this for the Primary Navigation or is it the Secondary Nav ?

The secondary nav

Hi there,

Try this CSS:

@media (max-width: 768px) {
.secondary-navigation .menu-toggle {
    display: none;
}
.secondary-navigation ul, .secondary-navigation:not(.toggled) .main-nav>ul {
    display: flex;
    flex-wrap: nowrap;
}
.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container {
    padding: 20px 0;
}
nav#secondary-navigation, .secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-navigation .main-nav {
    overflow-x: scroll;
}
.secondary-navigation li a {
    white-space: nowrap;
}
}

i tried this. it works almost perfectly. the only issue is that the menu is not covered completely and first few items of the menu is left out like this image:
https://ibb.co/FXsyt08

Hello there,

Try this instead:

@media (max-width: 768px) {
.secondary-navigation .menu-toggle {
    display: none;
}
.secondary-navigation ul, .secondary-navigation:not(.toggled) .main-nav>ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: unset;
}
.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container {
    padding: 20px 0;
}
nav#secondary-navigation, .secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-navigation .main-nav {
    overflow-x: scroll;
}
.secondary-navigation li a {
    white-space: nowrap;
}
}

Yes. It works perfectly. Thank you all for the amazing support!
P.S. Is there any way to just display the secondary nav on mobile and hide it on desktop?

I got the code to hide it on desktop. Thanks everyone for the help!

You’re welcome!

Try adding this CSS:

@media (min-width: 769px) {
    nav#secondary-navigation {
        display:none
    }
}