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.

I already know how to change the background color of the burger menu button when its in mobile screen.

What I want is to change it only in activated status (when appears the x to close the menu) because all the burger menu is in black and the button still appears in white, i want put it black too.

(only in mobile screen)

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?

Doesn’t work.

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) and when closing it is in another color (only in mobile)

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.

Doesn’t work, this only change part of the background button

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?

We haven’t heard back yet. If you wouldn’t mind sharing a screenshot of what you see, and more details about how you need it to be different, we’ll take a 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.

I see your screenshot, and i repeat, this changed only a part of the background button color, i want to change it at all – only in mobile device responsive.

Here are some screenshots that maybe help

https://paste.pics/d2473170fdf5841995dd84195b38a8dc

https://paste.pics/f46a31af0bc86e3d010c0a875a46bd90

thanks

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.

Please remove all code you’ve added that was provided in this thread, and let me know once you’ve done that, and we can start over.