Images in menu

Support
#1

Hi,

Can you insert images into a menu/mega menu. Not as the background but as a link?

thanks.

#2

Hi there,

You can add the Image Tag to the label of the menu item:

For Example:

<img src="http://localhost/x/wp-content/uploads/2017/11/client_dark.png"> ID1

In the case above you can find the URL of the image from the Media menu in WordPress. You may need a little but of styling after you add the images.

Thank you.

#3

thanks @christopher.amirian i have done that now. The only issue that im having is that as its in navbar, when you hover over it, the particle appears below it. Is there a way that i can turn that off for the image?

thanks again.

#4

Hi There,

Please provide your URL so we can provide you a tailored solution.

Have in mind that X offers Ubermenu as an Addon which is perfect for this type of layout.

http://preview.codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/full_screen_preview/154703?_ga=2.21616315.1275834604.1518626976-878009838.1516381855

Hope it helps!

#5

URL is https://hadleylearningcommunity.org.uk/secondary/

I looked at and tried ubermenu before but it felt a bit slow. I don’t think that i’m ready for that yet so i’m keeping things as simple as i can :slightly_smiling_face: thanks.

#6

Hey There,

Regretfully we cannot check the site url because it is under construction mode. Would you mind provide us access to the site so that we can take a closer look?

Regards.

#7

Sorry folks. I have lifted the under construction now.

thanks.

Image before menu item
#8

Hi there,

Please add the code below to Pro > Launch > Theme Options > CSS:

.menu-item-1882 a:hover > span {
    box-shadow: none !important;
}

The best way is to avoid using the menu item number. So you can go to the menu item from Appearance > Menu and enable the CSS Class option for that menu item by clicking the Screen Options and enabling CSS Classes:

Then add the hasimage class to that specific menu item:

After that, you can change the CSS code to:

.hasimage a:hover > span {
    box-shadow: none !important;
}

Thank you.

#9

That works perfectly. Thanks for the help and explanation @christopher.amirian :slight_smile:

#10

Glad to hear it :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.