Mobile menu padding

  • Resolved shipyardcycles

    (@shipyardcycles)


    4 years, 10 months ago

    Hi,

    I am having a problem with the mobile menu padding on my site. I wish to put some padding on the “Explore” button and hamburger to create some space once the menu button is pressed.

    I am viewing on an android device but have been told the issue is the same on iPhone.

    New to CSS so please advise how I can fix this?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ernie

    (@freldnb)

    4 years, 10 months ago

    Hey there,

    Not sure if I understood the issue, but you can target the hamburger with this CSS selector:

    .si-hamburger

    For example, if you want to add some padding and a background, you can use this CSS:

    .si-hamburger {
  background: #eee;
  padding: 20px; 
}

    When a mobile menu is active .is-mobile-menu-active class is added to the html element, which means you can apply styles only when the menu is active. Like this:

    .is-mobile-menu-active .si-hamburger {
  background: #eee;
  padding: 20px; 
}
    Thread Starter shipyardcycles

    (@shipyardcycles)

    4 years, 10 months ago

    Branko thanks so much for your help.

    The section option is exactly what I was looking for. To add bottom padding to hamburger when mobile menu was active.

    Thanks again,

    Chris

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Mobile menu padding’ is closed to new replies.