Site logo

Archived topic

Make all sub nav open on mobile

3 replies · Started by Willya on July 13, 2022

Viewing posts 1–4 of 4

Hi,

How do I make all sub navigation open by default, only on the mobile when the user click on the hamburger menu?

I have followed some thread about this, but not works in my case.

Hi Willya,

Here’s a CSS code you may try adding in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    #mobile-header .inside-navigation .menu-item > ul.sub-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        height: auto;
        overflow: visible;
        float: none;
        box-shadow: 4px 0px 6px 0px rgb(0 0 0 / 10%);
        border-radius: 20px;
        margin-top: 10px;
        padding: 20px;
        position: relative;
        top: 0;
        left: auto!important;
        right: auto!important;
        width: 100%;
    }

    #mobile-header .inside-navigation .menu-item > a > span > span.gp-icon.icon-arrow {
        display: none;
    }
}

This should show all sub menu items, and remove the drop down arrow.

Kindly let us know how it goes.

Hi Fernando,

You are my hero! Thank you..

You’re welcome Willya!

This archived topic is closed to new replies.