Styling hamburger overlay menu

  • Resolved jfans8yg19

    (@jfans8yg19)


    1 year, 6 months ago

    Hey!

    I’m wondering how I style the hamburger overlay menu on the Twenty Twenty Three theme, I want to wrap it all in a div so that I can assign some padding in order for the objects not to be so close to the edge of the screen (preferably no plugins).

    https://imgur.com/dM1BqQn

    I am able to center the text however that does not resolve the issue with the X button.

    Thank you so much.

    • This topic was modified 1 year, 6 months ago by jfans8yg19.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jfans8yg19

    (@jfans8yg19)

    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?

    Thread Starter jfans8yg19

    (@jfans8yg19)

    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;
}
    Thread Starter jfans8yg19

    (@jfans8yg19)

    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?

    Moderator jordesign

    (@jordesign)

    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.

    snoop23

    (@snoop23)

    Same here. Thanks for the fix, jfans8yg19.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Styling hamburger overlay menu’ is closed to new replies.