Replace burger menu icon on hover with another icon/image

[daddysnack]

Hi there, I would like to replace the hamburger (menu) icon with another icon when i hover over the menu button, is this possible?

[jade]

Hi there,

Yes, you can do this by adding custom CSS like this:

.x-btn-navbar.collapsed:hover i:before {
    content: '\f00d';
}

You will have to use the icon’s unicode value in the content value in the CSS just like above, you can find the icon’s unicode value on the icon’s page from fortawesome:

https://fontawesome.com/v4.7.0/icon/times/

Hope this helps.

[daddysnack]

This is awesome thank you do you know if this is possible to do with a unique icon or uploaded image? Also is there a way of having the secondary icon stay there until the menu is clicked again (closed) Currently the icon changes back to the primary image when the menu expands (thus it also doesnt show on mobile)

many thanks

[nabeel]

Hi again,

Yes you can do it for the opened menu by adding the following CSS code:

.x-btn-navbar:not(.collapsed) i:before {
    content: '\f014';
}

To use a custom icon or uploaded image, you can change the above code to this:

.x-btn-navbar:not(.collapsed) i:before {
    content: url(path/of/your/image.png);
}

Just change the path with actual icon / image path.

Hope this helps!

[daddysnack]

This is awesome thanks so much! Is there a reason this wouldn’t be working for mobile? (sorry for the questions!)

[friech]

Hi Tariq,

Please close your (min-width: 668px) media query, you miss to close it.

Please add the missing closing bracket (}) before your (min-width: 1800px) media query starts.

Hope it helps,
Cheers!