Transparent Menu on Mobile Issue

Support
#1

Hey!

I’ve used some custom CSS from previous threads to create a transparent menu, topbar, and logo that overlays a slider on my homepage. It appears it has all worked well throughout my site and homepage. However, I have one problem with it on mobile. The menu and top bar all overlay the first image/text on the home page.

You can see what I’m talking about here:

How can I fix this? And do you see any problems with the code I have already implemented?

#2

Hi There,

Could you please send us with some screenshots?

Thanks.

#3

No problem! As you can see, there is an overlap from the mobile menu. It only happens on my homepage.

#4

This is the effect I created on the homepage for the desktop. I’ve also added CSS and java to make the menu nontrasparent when the user scrolls.

#5

Hi There,

To fix this issue, please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .home .masthead {
        position: relative;
        height: auto;
    }
}

Let us know how it goes!

1 Like
#6

Thank you so much! Worked like a charm!

#7

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.