Remove one dropdown 'layer' on mobile view

Design help Layout & Design
1

Hello!

My website has a ‘Menu’ button which reveals a large dropdown nav with all the sites pages. This works well on Desktop as a simple hover over the ‘Menu’ link will reveal the menu, however on Mobile it adds an extra click as users are required to press the hamburger icon to reveal the Nav, then press the single ‘Menu’ dropdown to reveal the full nav:

image
image640×1234 37.9 KB

How can I reveal the full dropdown nav when the hamburger icon is pressed on mobile?

Like this:

image
image640×1234 59.7 KB

Many thanks!
J

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @Celer_Studios Can you please give a try by adding below css code.

@media screen and (max-width: 991px) {
    .uui-navbar02_dropdown-toggle {
        display: none;
    }

    .uui-navbar02_dropdown-list {
        position: relative;
        overflow: hidden;
        display: block !important;
        overflow: hidden;
        overflow-y: auto;
        background: #fff;
        max-height: 60vh;
    }

    .uui-navbar02_container {
        overflow: hidden;
        align-items: normal;
    }
}

Hope this will give you a desire output.

Thank you

3

Thank you @addweb!

Where exactly do I paste the code into sorry?

4

You can place the code in the custom code section @Celer_Studios

image
image1031×730 80.6 KB