Hamburger / Mobile Menu Icon

Support
#1

HI there, I urgently need your support on how to change the colour of the hamburger menu and also remove the surrounding box with the drop shadow please. I tried other possible solutions, but they don’t seem to be working for me? I’d appreciate your help please. Thanks.

#2

Hi There,

Thanks for writing in!
Please add this CSS to your X->Theme option -> Global CSS and let us know how this goes.

.x-btn-navbar.collapsed {
 background-color: none !important;
box-shadow: none !important;
color: #000; /* you can change it */
}

Hope this helps!
Thanks

#3

Hi there Basanta, sorry I still can’t get this working right. I also found some extra code from another post around similar topic?

The hover state of the burger is good (it’s grey with white lines), but in it’s normal state, the button appears white. So white box with white menu (burger) lines.
Can you suggest anything else which may help?

Thank you for the support.

#4

Hi There,

Thanks for the confirmation!

Can you please remove all other CSS that you have written for the menu and add this CSS only?

.x-btn-navbar.collapsed {
    background: transparent;
    color: #333;
    box-shadow: none;
}

.x-btn-navbar, .x-btn-navbar:hover {
    color: hsla(0,0%,100%,0.92);
    background: #666;
    box-shadow: none;
}

Hope this helps!

#5

Hey Basanta, Not quite there…Hamburger Hover state seems to be okay, but I still can’t see the menu in normal state. Please see screen shot. The burger menu (should appear) is located underneath the logo (where all the white space is? Thanks for further assistance.

#6

Hi @grayads,

I could see that your mobile menu is there however it is hidden because the color is white that is why you could not able to see it.

You will need to change the navbar button color so that you could see it. Add this code below to change the mobile menu hamburger color:

.x-btn-navbar, .x-btn-navbar:hover {
    color: hsla(0,0%,100%,0.92);
}

Let us know how it goes.

Thanks.

#7

Hi Nico, still no luck unfortunately. I have inserted the below code into the Global CSS, but the mobile nav remains invisible? Or white? Can you please recommend a fix? Thank you.

.x-btn-navbar.collapsed {
background: #999;
color: #333;
box-shadow: none;
}

.x-btn-navbar, .x-btn-navbar:hover {
color: hsla(0,0%,100%,0.92);
background: #666;
box-shadow: none;
}

.x-btn-navbar, .x-btn-navbar:hover {
color: hsla(0,0%,100%,0.92);
}

#8

Hi There @grayads

Copy all of your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any errors. If you have any errors, your CSS won’t parse correctly until you fix it.

If there’s no issues, try adding the following code into your custom CSS rule to set the default color.

.x-btn-navbar {
    color: red;
}

Hope that helps.

#9

Thanks mldarshana. All seems to be working at the moment. Thank you for your help.

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.