Adding images to the Mega Menu – Themeco Community

Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 13:13:28 +0000

Hey,

is there an option for adding images as menu items to the mega menu?

Thanks in advance!

Reply To: Adding images to the Mega Menu

Cousett — Tue, 19 Aug 2014 13:27:23 +0000

You would have to do some custom css that would add a background image to those selectors. Send us your URL and we can provide you with some more specific CSS.

Reply To: Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 13:29:34 +0000

The URL is: http://vegception.de

in the menu under “restaurants” I want 2 pictures, one for “Hannover” and one for “Mallorca”

Is that possbile?

Reply To: Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 13:55:48 +0000

I encountered two new problems, I hope its no problem to post them here as well.

1. You can’t see home button and the link to restaurant anymore, because they’re colored white.

2. Can I place the page titles or like here the “Category Archive” a bit more right?

Thanks in advance for your support!

Reply To: Adding images to the Mega Menu

Cousett — Tue, 19 Aug 2014 13:59:12 +0000

Use these selectors and add your background image in the CSS.

Hannover – .x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-26

Mallorca – .x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-27

Reply To: Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 14:04:16 +0000

Thanks, where do I use this sectors? In the custom CSS, too oder anywhere else?

How do I add the Background Image in the CSS?

Reply To: Adding images to the Mega Menu

Cousett — Tue, 19 Aug 2014 14:27:50 +0000

the custom css will be in your customizer under Appearance -> Customize -> Custom -> CSS

This page has some information on how to add background CSS images – http://www.w3schools.com/cssref/pr_background-image.asp

Reply To: Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 15:14:29 +0000

Do I paste this whole code into the custom css?:

Hannover – .x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-26

Mallorca – .x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-27

And then there is still my question how I add a background image, do I have to set it under appearance -> menu -> css classes or where?

Reply To: Adding images to the Mega Menu

Zeshan — Tue, 19 Aug 2014 16:49:33 +0000

Hi Julian,

Thank you for writing in!

We’re sorry for the confusion. Please add the following CSS code under Custom > CSS in the Customizer:

/* 1. Background image for "Hannover" */
.x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-26 {
   background-image: url(1-URL-TO-YOUR-IMAGE);   
}

/* 2. Background image for "Mallorca" */
.x-nav .x-megamenu.col-2>.sub-menu>li#menu-item-27 {
   background-image: url(2-URL-TO-YOUR-IMAGE);
}

Replace 1-URL-TO-YOUR-IMAGE with the image URL that you want to show as a background of Hannover, and 2-URL-TO-YOUR-IMAGE for Mallorca.

Hope this helps. 🙂

Thank you.

Reply To: Adding images to the Mega Menu

juliantrahe — Tue, 19 Aug 2014 18:11:00 +0000

Thank you, I will try this.

Can you helpme with my question above with the attached .png?

Thanks!