Mega Menu Images

[mikexavier]

I have been struggling to get images to display correctly in the mega menu. I have tried all different combinations of check boxes, html, width etc. but nothing seems to be working the way it should.

There are examples under the shop (which works sometimes) and collections (which has never displayed correctly).

The background seems to revert to the menu items size and not include the image?

I’m also looking for a way to remove the vertical and horizontal lines and was told to check the ‘alternate menu’ box but this isn’t working for me.

Thanks for your help!

Mike

[Kyle – SUPPORT]

Hi

Check now

– Kyle

[mikexavier]

Thanks Kyle, it looks better but still not ideal… the spacing is much too large, there only really needs to be 10px padding around the image (or close to).

I’m also not sure where the HTML is for the image itself as it’s no longer under the menu item.

Could you run me through how you’ve done it?

Thanks

Mike

[Kyle – SUPPORT]

This is the structure of mega menus: http://cardinal.swiftideas.com/documentation/wp-content/uploads/sites/35/2014/05/mega-menu-setup.jpg

You had your image as the first child of the parent item, which is the column heading position. All I did was make it the second child.

Can you let me know which spacing you are referring to?

– Kyle

[mikexavier]

Understood… please see attached screen grabs.

1. The spacing goes far beyond the image size (as you can see). How do I ensure the spacing (or background) is only slightly larger than the content of the menu?

2. As you can see from the screen grab, there is no HTML in the parent, first or second child position? Where is it?

Thanks Kyle

– Mike

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

That’s odd, will check now

[Kyle – SUPPORT]

Can you try use the image asset shortcode instead of HTML

– Kyle

[mikexavier]

Hey Kyle, you’re going to have to explain a few things…

1. Where do I find the image asset shortcode? (I have attached the image attachment details).

2. Once I have the shortcode for that image, where is the HTML to replace? As I showed before, it doesn’t seem to exist. Although the image is still showing in the menu.

Thanks

Mike

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

I’ve moved the menu items back to the first child, and the html section shows up again. However some divs are missing, that’s why I want you to try the image shortcode instead

Create a new page, add the image page builder asset, switch to visual editor then copy the shortcode to put in your menu item

– Kyle

[mikexavier]

It has reverted back to a one column background (no filling the size of the image).

I used the correct structure for the “shop” menu item and have an image in there also which seems to work most of the time. Not sure why it’s behaving differently for the ‘collection’ menu item?

Any other ideas?

[Rui Guerreiro – SUPPORT]

just forwarded the topic to Kyle so he can reply.

-Rui

[mikexavier]

Hey guys, any luck with this one?

I have moved the staging site to go live tomorrow morning… the menu is still an issue that I would like to fix ASAP if possible.

hiveswimwear.eu (and the menu in question is the “collections” one)

Let me know if you have any other ideas 🙂

thanks

– Mike

[Kyle – SUPPORT]

Add this to your custom css:

nav.mega-menu li.sf-mega-menu-alt .sub li.menu-item-object-custom {
  padding: 20px;
}

– Kyle

[mikexavier]

That gave it a little white space love around the image but for some reason the image is now a thumbnail? Ideally it would display as the original size? do you know how to achieve this?

Cheers Kyle!

[Kyle – SUPPORT]

Have you tried setting the mega menu column width?

– Kyle