Clear background for hamburger menue icon

[daddysnack]

Hey I have found topics about changing the colour of the hamburger menu colour but i want to know how I can make the background of the hamburger icon completely transparent always but change the icon colour for static and hover?

Cheers!

[jade]

Hi there,

Please try this code in the Global CSS:

.x-btn-navbar.collapsed {
    background-color: transparent;
    box-shadow: none;
    transition: all 0.4s ease;
}

.x-btn-navbar.collapsed:hover {
    background-color: #dd3936;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.25);
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.

[daddysnack]

Hi thanks for this unfortunately on my mobile the whole button is transparent on mobile devices? Also when the menu is clicked on the background goes dark grey with a white icon?

[nabeel]

Hi again,

Try this instead:

.x-btn-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    transition: all 0.4s ease !important;;
}

.x-btn-navbar i {
  color: #fff !important;
}

Hope this helps!

[daddysnack]

Perfect! Thanks so much

[Prasant]

You are most welcome.