mobile menu twentig

Γεια ??

The issue you’re having is because page scrolling is prevented, every time the mobile menu is opened. There’s no apparent reason for such behavior, especially since your mobile menu is sticky, but it’s easy to revert it with CSS.

Add the following to your custom/additional CSS:

@media only screen and (max-width: 481px){
    .lock-scrolling #page.site{
        position: relative;
    }
}

Save, test and let me know.

Thank you! (Ευχαριστω πολ?)
Now it works but as I tried to finetune Offset on Desktop and mobile but can’t seem to find the right value to prevent sticky menu overlapping in both.
Read your tutorial but I am unable find (?) the right selector I think in order to insert it in the “offset” option.
tried #masthead.site-header.has-logo.has-menu I don’t even know if that is correct…

No problem ??

Yes, you should add the following selector in “Offset” option (the one you tried is correct but you don’t need all the classes):

#masthead

You should also disable “Auto-generate #ps2id-dummy-offset element” option as you don’t use it.

Save changes and test if the offset work as expected with the selector above.

Also, keep in mind that you can adjust a bit your targets with CSS. For example, the following CSS will essentially “add” another 40 pixels to the offset of “ΥΠΗΡΕΣΙΕΣ” section title:

#services::before{
    content: "";
    display: block;
    height: 0;
    margin-top: -40px;
    padding-top: 40px;
}

You can do this for any target to adjust it individually. You can also differentiate between desktop and mobile with CSS media queries. For example, to make the additional 40 pixels offset apply only on the mobile menu, you can do:

@media only screen and (max-width: 481px){
    #services::before{
        content: "";
        display: block;
        height: 0;
        margin-top: -40px;
        padding-top: 40px;
    }
}

Hope this helps ??

Unfortunatelly The selector #masthead doesn’t work as expected. All titles get hidden under the sticky menu both in Desktop and mobile.Another solution would be to add spacer blocks in gutenberg before the heading block but it doesn’t feel proper…

OK. You don’t need to add spacer elements. Can you try the CSS?

Add the following to Customizer > Additional CSS:

._mPS2id-t::before{
	content: "";
	display: block;
	height: 0;
	margin-top: -50px;
	padding-top: 50px;
}

and keep the offset option as it is now.

Bingo!!!
works like a charm now. Thank you so much! I should buy you a souvlaki sometime ??

Awesome ?? Παρακαλ?!

• This reply was modified 3 years, 3 months ago by malihu.