Add Image to Mega Menu

[racheldeters]

Hello,

I am trying to add an image to the first column (of 3) of my mega menu for each category (Home, Kids & Baby, Wedding, Etc.) and then have the next 2 columns as the menu text options (see marked up screenshot). Is there specific CSS to add to make this happen?

Also, is there anyway to add padding to the bottom of the menu. A couple of my menu items are extremely close to the bottom of the menu.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Yes that is possible, please read here under the section “Mega Menu Item/Columns”: http://swiftideas.com/documentation/2014/05/10/menus/.

—

To increase the bottom padding of the menu, please use this:

li.menu-item.sf-mega-menu.sf-mega-menu-fw>ul.sub-menu {
    padding-bottom: 30px;
}

Thanks.

[racheldeters]

Great – thanks for the help!

I am now able to add the image, but do you have any recommendations to remove the “navigation label”. When I leave it blank, the page (aka image) disappears from the menu. For example, I have labeled the Navigation Label “Women’s” when really I want to leave it blank and have the image align with the top menu items in the rest of the columns.

Best,
Rachel

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please test enabling: “Mega Menu No Link Title”.

Thanks

[racheldeters]

Hmm, changing the title didn’t work (see screen shot).

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please contact your hosting support and ask them to increase your max_input_vars settings, ex: ini_set('max_input_vars', 3000);

As you menu is large, the site cannot save the settings. Increase the above setting limit will fix this.

Thanks

[racheldeters]

Hi David,

I contacted my hosting service and the informed me that it is currently set to the maximum for my shared hosting plan and any changes made on it will affect all users on the server. So, they are unable to increase the maximum from 1000 to 3000. Is there anything else that could be done? Say, change the font to white and move the image up with custom CSS?

Thanks!
Rachel

[David Martin – Support]

Hi,

I’d suggest on asking them to upgrade you to make use of these features. If you do not do this and add more menu items, the menu may not save or the menu location will be un-checked.

—

Workaround:

I added a custom class (http://d.pr/i/1lpso) to your menu item, then you can please add this CSS to Theme Options => Custom CSS.

li.custom-menu-item > a {
    display: none!important;
}

Thanks.

[skullo27]

Hi I see in this example you use a to insert custom code to display an image in the mega menu. Is it possible to insert elements like revolution slider using a short code?

Thanks
Sam

[David Martin – Support]

Hi Sam,

I have not tested a Rev Slider shortcode but shortcodes should be supported within those areas.

Thanks,
David.

[skullo27]

OK thanks, have you tested swift framework elements, like swift slider etc?

Sam

[Kyle – SUPPORT]

Most yes, but not Swift Slider

– Kyle

[skullo27]

OK so what would be best to use? “SPB Sections”?

thanks.

[Kyle – SUPPORT]

In the menu?

– Kyle

[skullo27]

Sorry yes, I am interested to know how i can create elements that I can managed in wordpress so I do not have to manage custom code in the menu itself. Rather, insert a sort code and then I can update the area without changing code etc. Does that make sense.

thanks