Making sure you have global padding in “styles > layout” (https://imgur.com/5JWxSio) solves this, however this is not preferable for me. Is there another way I can manage this problem?
I’ve identified which element I would have to add padding to, however I think I am making a mistake in my Additional CSS code as adding padding there whilst trying to target it does not work.
https://imgur.com/X4K6elT
This is my code in Additional CSS:
.wp-block-navigation__responsive-container is-menu-open has-modal-open {
padding: 1em;
}
I solved it!
Adding the following code in the Additional CSS tab Styles fixed it!
#modal-1 {
padding: 1em;
}
However now my only question is whether this will apply padding to some other elements on my site or is the #modal-1 div id only used by the hamburger overlay?
Hi @jfans8yg19
Glad you were able to figure this out – I’ll mark this thread as resolved for future folks who find it when searching.
I’ve had the same problem: mobile menu to close to the edge.
I had set the top and bottom padding to 0 in the layout style setting. (to place a full screen hero image on the homepage without a white border at the top).
This was the cause of the problem. If you set the padding to 0% or 0 vh, the mobile menu will again be a bit away from the edge.
Same here. Thanks for the fix, jfans8yg19.
