Hamburger Button Color

  • Author
    Posts
  • #159495

    uniquelybad
    Member

    I’d like to change the color of the hamburger button that toggles my menu. It is currently black, and thereby invisible on the black background of my site heading. Halp!

    The blog I need help with is uniquelybad.wordpress.com.

    #159496

    lelandf
    Theme Author

    Hi there,

    Please use the following Custom CSS to turn the hamburger button white:

    /* Make menu toggle button white */
    .menu-toggle {
    	border-color: #fff !important;
    }

    Best regards,
    Leland

    #159497

    uniquelybad
    Member

    Hi Leland,
    I added the CSS but the button didn’t change. When I save the changes, leave the customization page and then return to the same, the code now looks like this:

    .menu-toggle {
    opacity: .25;
    /* Make menu toggle button white */
    }

    #159498

    lelandf
    Theme Author

    Hmm, that’s very odd. Are you not sure about how that “opacity: .25” got in there? I can’t think of a good reason why a CSS rule like that would be used there, so if you don’t know why it is there, I would suggest removing it entirely, saving, then trying again.

    Here’s an example of another user of the theme that was able to change the hamburger icon with the same CSS provided, so it should work. You can see it still uses the Adaline theme and has a white hamburger icon.

    Although maybe try this alternative that does not use the !important flag to see if you have better luck.

    body .menu-toggle {
      border-color: #fff;
    }

    If you’re noticing more weirdness with the Custom CSS panel then I would suggest reaching out to WordPress.com Live Chat support to see if they can look into why the Custom CSS you input is not being saved as expected. More info on contacting WordPress.com Live Chat support can be found here: https://wordpress.com/support/live-chat/

    Best regards,
    Leland

    #159499

    uniquelybad
    Member

    Ok, I think that opacity line was a remnant of something I previously tried doing to change the button.

    The CSS simply was not saving. I didn’t go back and test the first fix you gave me, but can verify that the second one definitely does and the button is now white. Thanks!

    #159503

    lelandf
    Theme Author

    Awesome, thank you for the update! I’ll go ahead and mark this topic as resolved. Feel free to let me know if you have any other questions by posting again in this forum and I’ll take a look.

    Best regards,
    Leland

The topic ‘Hamburger Button Color’ is closed to new replies.