How to change the mobile menu "hamburger/pancake stack" icon to a customer logo?

[Bruce Rawles]

I'm using a modified LifeStyle Pro theme and want to replace the mobile menu icon consisting of 3 parallel horizontal lines (which I've seen variously referred to as a hamburger icon or pancake stack) with a high resolution icon supplied by my client (which will likely also require making the font size for the MENU legend larger) and I also would like to change the background image for the entire horizontal box that the mobile MENU legend (and it's new icon) reside in, while leaving the overall site background image behind it intact. Any suggestions as to how to do this? Thanks in advance! 🙂

[Derek]

Without seeing any code, I'd say start with finding the CSS for either the ::before or ::after pseudo element. It will have a similar class associated with it (for example):

.responsive-menu-icon::before {
    content: "\f333";
}

There is a way to display images in the content class. If memory serves me correct, it's as simple as:

.responsive-menu-icon::before {
    content: url(image.jpg);
}

You will definitely have to modify the height/width settings, and maybe some of the positioning elements (left/top/etc). You will probably be able to modify the text size in the same rule.

If the background image for the header is being set in the style.css file, you can update it there. There's a chance it's also being set in the Dashboard under Appearance > Customize.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Bruce Rawles]

This reply has been marked as private.

[Author]

Posts