Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

making the simple theme even simpler – inverting the hamburger!

  • This topic has 2 replies, 2 voices, and was last updated 5 months, 2 weeks ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #10571
    Avatar photobrizzlemark

    Hi all,


    I have been simplifying the template down, but I am now stuck in inverting the hamburger menu in tablet/phone mode.  By default it is black background with a white hamburger.  Trying to get a white background with black hamburger.  I have managed to change background (should show grey) but for the life of me can’t change the hamburger colour.

    Would have though it would track the set background and foreground for the top menu, but doesn’t seem so – hopefully someone’s CSS skills are better than mine – which is limited to pecking around with the website inspector! 🙂

    Many thanks – if you spot errors please shout.

    Avatar photocandidexmedia

    Hi brizzlemark!

    As you may have guessed, for the background of the button:

    .navbar .navbar__toggle {
      background: white; /* or whatever colour value you prefer */


    For the x itself:

    .navbar .navbar__toggle-inner, .navbar .navbar__toggle-inner::after, .navbar .navbar__toggle-inner::before {
      background-color: black; /* or whatever colour value you want to give it */



    Avatar photobrizzlemark

    Excellent – thank you very very much.  Saved me much pecking about with web inspector.

    Devs: shouldn’t these settings match the foreground/bacground settings for the top bar, at least by default?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘making the simple theme even simpler – inverting the hamburger!’ is closed to new replies.