Replace hamburger icon with an image

  • Is there a way to replace the hamburger icon on the mobile menu in the Sinatra theme with a small image that fits the overall look of the site?

    If so what would the recommended dimensions of the image be?

    Thanks for your help,
    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • Branko

    (@brankoconjic)

    Hey Phil,

    You can specify the size of the hamburger menu in the CSS. Try adding something like this into the Additional CSS field in the Customizer:

    button.si-hamburger > * {
  visibility: hidden;
}

button.si-hamburger {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background-image: url(https://assets.stickpng.com/images/6002fa8551c2ec00048c6c79.png);
  background-repeat: no-repeat;
  background-size: contain;
}

    I set the size to 32px. Replace the background image URL with your own.

    Let me know if that worked for you.

    Thread Starter bowtie456

    (@bowtie456)

    Thank you. That worked great. How would I change it to the X once the mobile menu is open?

    Branko

    (@brankoconjic)

    You can use is-mobile-menu-active for that. Like this:

    .is-mobile-menu-active button.si-hamburger {
    background-image: url(https://assets.stickpng.com/images/6002fa8551c2ec00048c6c79.png);
}

    Replace the image with a different one.

    Thread Starter bowtie456

    (@bowtie456)

    That worked great. Thanks for your help.

    Branko

    (@brankoconjic)

    Glad to hear that, @bowtie456.

    If you like the Sinatra theme, please leave a review. It means a lot to us. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Replace hamburger icon with an image’ is closed to new replies.

Tags