Upload image for menu item?
-
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?
-
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.
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 using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it