Mobile menu hiding under Elementor section

Hi there,

I’ve got a little issue where i have an elementor section to fill the top of the page on mobile, but that hides the sydney theme menu icon underneath it, is there a way to make the menu icon show through the elementor section (which is an image btw) - i don’t want to make that image transparent, either way one couldn’t click on the menu neither since it’s covered by the said elementor section…
By the way, i’m trying to position the main (desktop) menu navbar to the left but it somehow puts itself in the middle when i add additional css to float left…? Here’s the address:
https://deltagreen88.ddns.net

Thanks in advance for any help,

Hi there,

Firstly, you may need to add a margin to the top of the first elementor section:
margin-top: 60px;
Screenshot_27

Then down a bit the menu items for the mobile screen by adding this CSS code to Customize > additional CSS:

nav#mainnav-mobi {
    top: 20px;
}

Hey, thanks a lot for your quick response,
but would there be a way to overlay the menu above the elementor section, and make the background transparent in some way, so that it somehow looks like this:


Sincerely,

Oh okay, then please replace your custom code:

.header-wrap .btn-menu {
    float: left;
    margin-left: 15%;
}

with this:

.header-wrap .btn-menu {
    float: left;
    margin-left: 15%;
    position: absolute;
    z-index: 1;
}
#mainnav-mobi {
    top: 20px;
}

Regards,

Wow, man you’re the greatest, thanks a lot that worked like a charm - could i lower the position of the dropdown a little bit too? And i just wanted to know if i could use the same button on the desktop and make it float on the left…?
Thanks a lot for your help,

You can increase the value of the top from this code:

#mainnav-mobi {
    top: 20px;
}

Please create a new post for this question.

Regards,