Change side bar button color status – mobile

Howdy –

Yes, you can change the color of the white hamburger placement on mobile view. Use this CSS:

@media screen and (max-width: 700px)
.sidebar-toggle.toggle-on, .sidebar-toggle {
    background-color: #51a6da !important;
}

background-color: #

^ that is where you pick the color. For example, it was #fff which is white. I changed it to a random blue code. Use a hex code indicator to pick out the color code for what you want to use.

Write back to me if you have more questions.

Hi @gerard57,

What I want is to change it only in activated status (when appears the x to close the menu)

Okay, please try this CSS for targeting the “x” on the menu (for mobile):

@media screen and (max-width: 700px) {
      a.sidebar-toggle.toggle-on {
            background: #51a6da;
      }
}

Does that help?

Hi @gerard57,

I want to change the background color only when the hamburger menu is in the activated state (when the x appears to close the menu)

I’ve made a small change to the CSS so please try this:

@media screen and (max-width: 700px) {
      .toggle-on::before {
            background: #ff0000;
      }
}

I’ve made the background colour red, just so you can see this styling is only applied for mobile — but you can change it to whatever you fancy.

Hi @gerard57,

This is what I’m seeing from my side:

Screenshot

If this isn’t what you are looking to do, can you be more specific about how you would like the background to look?

Hi @gerard57,

Just following on from @supernovia’s reply — I’m not sure why that last screenshot link isn’t working but here is another:

Screenshot

This is how the CSS I provided works on your site and on my test site running this particular theme.

Hi there,

The CSS Gemma provided isn’t working, because the CSS provided by @lizkarkoski above contains an !important that overrides it. There is no way to make the change you want if that other CSS remains on your site.