Adding image to navigation items on hover

[Omwoods]

So I’ve researched for an hour but can’t figure this out. I’d like to add star sparkle image to show on hover on my navigation links Can anyone give me a pointer on how to do it? Or, the code? So an image would appear somewhere above the hovered link word, sort of like in this mockup. If it helps, the star image I’m playing with is here: https://www.bhakticreative.com/wp-content/uploads/2019/08/stars30.png and you’ll see my site link from that URL too.

[nabeel]

Hi Bhakti,

Thank you for reaching out to us. To add an image over a menu item on hover, add the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav>li:hover:before {
    content: url(https://www.bhakticreative.com/wp-content/uploads/2019/08/stars30.png);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Cheers!

[Omwoods]

This worked beautifully! Thank you!!

[ruenel]

You’re welcome!
We’re glad @Nabeel were able to help you out.