Upload image for menu item?

kl · wrote on Jun 24, 2021, 10:32 PM

Hi there - I'm wondering if it's possible to upload an image (a .png) as a header menu item? For example, on my site here, I've uploaded an image as my site title (Kate Leisy), but I'd like to upload an image for 'Info' as well. Is there a way to do this?

https://www.kateleisy.com/

Richard · wrote on Jun 27, 2021, 2:53 AM

Dear @kl

Great website, best wishes ✨

This is not possible with any standard options, however Wordpress does have functions to make this process easier ✅

In > Appearance > Menu's >

You should find a 'Screen Options' at the top-right of your page. From here you choose the 'Advanced menu property' - "CSS Classes" :

Here i have applied the 'Class' 'image-menu-item'

NOTE: You could also apply this same process using "Text Formats" & their potential for custom class names.

Then you would apply the Text Format to the menu-item via:

> Appearance > Customize > Menu style > Primary Menu >

Next some simple jQuery can be used:

https://laytheme.com/documentation.html#custom-javascript - NOTE: Use of "newpage event" & '$' to 'jQuery'.

https://forum.jquery.com/topic/replacing-text-links-with-images

The following Code will need to be added into 'Custom <head> Content' within:

> Lay Options > Custom CSS & HTML >

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){    
        jQuery(function(){
             jQuery('.image-menu-item a').html('<img 
             src="https://rickei3.dreamhosters.com/wp- 
             content/uploads/2021/03/lilie-von-gruen-susann- 
             zielinski-cursor-f23030-e1616640182583.png"/>')
        })
});
</script>

Now within this code is a piece:

 src="https://rickei3.dreamhosters.com/wp- 
             content/uploads/2021/03/lilie-von-gruen-susann- 
             zielinski-cursor-f23030-e1616640182583.png"

This represents the 'source (src)' of your image, we need to input your desired image.

We can do this using the Media LIbrary located in: > Media

When viewing a 'Media Item' it comes with a handy 'File URL'

**Copy & Paste this File URL into the images 'src' path:

src="_insert_your_new_file-url_here_"

Also remember to keep your image files very small when doing this otherwise they may cause flicker on page load.

Lay Theme Forum

Upload image for menu item?

Dear @kl

Great website, best wishes ✨

There are many ways im sure you could do this @kl but this is what first came to mind - Hope this helps and have a wonderful day 🌝

Richard

Before you post:

When you post:

Online Users