Mobile menu sticky and background color fading in when scrolling page

[SchoonhovenOntwerpStudio]

Hello, I’m working on my mobile menu. It’s kinda looking the way I want to (I tried with some custom CSS) but not fully yet.

For example what I would like is that when you are at the top of the mobile page the “hamburger” button background is transparent, when you start scrolling the page there is a background fading in (like how it is showing at the moment - I just don’t want to have this background color showing at the top of the page)

And the last thing that is not working correctly at the moment is when you click the “hamburger” the menu is unfolding but stays at the top of the page, so what I would like that the menu will unfold directly at the position of the “hamburger”

The way the nav bar is behaving on the desktop is good so the adjustments would only be for the mobile version.

Hopefully it’s clear what I want and you are able to help me out. Thanks in advance.

Cheers,

Jeroen.

[friech]

Hi Jeroen,

Thank you for writing in, what you need to do is to make the .masthead to position: absolute; and width:100%, then remove the negative margin you applied on the .x-main.full.

• https://cssreference.io/property/position/
• https://cssreference.io/property/width/

Use CSS Media Queries so your custom CSS will only effect the mobile view.

• https://www.w3schools.com/css/css3_mediaqueries_ex.asp

We are unable to provide CSS code for the customization as it is outside of our support scope. If you are more interested in having control over all aspects of the Header I suggest that you consider the Pro theme which has a Header and Footer builder and you can use various elements to create a header/footer.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Cheers!

[SchoonhovenOntwerpStudio]

Thank you for that.

Cheers Jeroen.

[friech]

You’re most welcome,

Cheers!