Image in nav menu instead of text

Hi Jessica,

Have you considered using custom link method instead of background image?

This is what we usually suggest:
https://generatepress.com/forums/topic/add-image-to-primary-menu/#post-492699

It should help with consistency.

Let me know :)

Thanks. However this method doesn’t work as well nor is it optimal for a respinsive WordPress menu.

Mine already has an image based on a style for the one item.

I already figured that main nav item out and works exactly as needed.

Except the sticky menu and the mobile slide out menu are controlled by different styles/classes so what I didn’t isnhettingnlist when I scroll down or use a mobile device.

Hi there

in your CSS, you are using the #site-navigation ID for assigning the background image, try replacing that with the .main-navigation class

Thanks David. I tried using .main-navigation and didn't get the same results. but I'll take another look at it and see if that does it. Appreciate the feedback.

Ok let me know :)

David! Thank you! I can't believe THAT'S all I had to do. Someone was helping me and suggested the #site-navigation but this one change did exactly what I needed.

MUCH APPRECIATED!

You're welcome :)

Hm. this worked perfectly locally but when I made the change to the sandbox site on my live server, it didn't take in the mobile menu. all I did was copy paste the same code I have locally (making sure the url path to the image was correct) and the mobile menu isn't showing correctly.

I clear the cache and even restarted things but no-go.

Is there a different style attribute for the mobile menu items?

It looks like you have a different menu assigned to the slide-out navigation. If so, you need to edit that menu and add your custom class to that menu item.

This is really odd. I fixed it and now it shows up on mobile properly but the child menu list disappeared.

Every time I fix 1 thing, something else disappears. haha (funny not funny).

I feel as if there's got to be an extra mobile slide out attributing or class which needs adjusting (in this case), otherwise, nothing is different about this menu item than the ones above it that have child pages.

I removed the style from the slide out menu and it appears perfect like the other menu items with child pages. I can't understand or find hte right style attribute that when I have the style applied, hides the child pages. In the code inspector, you can see the child pages are there but they are hidden. It's so odd.

So just to cover.
The desktop is correct? With the icore background image and no sub menu,
The slideout navigation you want to display the icore image and keep the sub menu?

Yes, that's correct.

Before, I got the logo to show correctly in the slide out but the sub menu disappeared.

For the slide out nav menu have you tried the method that Leo suggested here:

https://generatepress.com/forums/topic/image-in-nav-menu-instead-of-text/#post-719925

As the current method removes the element that is required for the click sub menu