Avada Forums Community Forum How do I change the colour of the hamburger menu?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Goodfolk
    Post count: 1

    From what I can tell, the menu icon colour change requires css. Is this correct? If so, how do I go about doing that? I’m a novice so if someone could help by providing a step-by-step process it would be much appreciated.


    Post count: 873


    This CSS works for me.

    /* Change "orange" to the colour of your choice. */
    .fusion-header-has-flyout-menu .fusion-flyout-menu-icons .fusion-flyout-menu-toggle:hover .fusion-toggle-icon-line,
    .fusion-header-has-flyout-menu .fusion-flyout-menu-icons .fusion-flyout-search-toggle:hover .fusion-toggle-icon-line {
        background-color: orange;
    .fusion-header-has-flyout-menu.fusion-flyout-active .fusion-flyout-menu-icons .fusion-flyout-menu-toggle:hover .fusion-toggle-icon-line, .fusion-header-has-flyout-menu.fusion-flyout-active .fusion-flyout-menu-icons .fusion-flyout-search-toggle:hover .fusion-toggle-icon-line {
        background-color: orange;

    Copy. Then paste to your Addtional CSS or Custom CSS area.


    Post count: 2

    I figured out the problem. It’s not the CSS (at least it wasn’t for me).
    Edit the header with the menu
    Edit the mobile tab
    add a Mobile Menu Trigger Expand Icon and a Mobile Menu Trigger Collapse Icon

    The reason why the CSS didn’t work for some is there was nothing to style. And I don’t think the custom CSS is needed.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.