Docs

[juliantrahe]

Hey,

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

Thanks in advance!

[Cousett]

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.

[juliantrahe]

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?

[juliantrahe]

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!

[Cousett]

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

[juliantrahe]

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?

[Cousett]

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

[juliantrahe]

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?

[Zeshan]

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.

[juliantrahe]

Thank you, I will try this.

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

Thanks!

[juliantrahe]

I tried this and here is how it looks right now:

http://www.vegception.de

Here is one of the pictures I want to appear in the menu:

Can i define the height anyhow?

Edit: I got it for the Hannover section, but the “Mallorca” pic does not show up.

[Zeshan]

Hi Julian,

Thank you for writing in!

#1: Glad to see it worked for you. 🙂

Regarding the “Mallorca” section, simply replace #menu-item-27 in above CSS code with #menu-item-42 (see: http://prntscr.com/4efx3c)

I am seeing that you have already defined the height, glad to see that 🙂

#2: Regarding the above pointed issues that we someone missed, simply add the following CSS code under Custom > CSS in the Customizer:

.x-navbar .x-nav > li > a, .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li.current-menu-item > a, .x-nav-collapse .sub-menu a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
   color: #bababa;
}

.archive .h-landmark {
   margin-left: 28%;
}

Hope this helps. 🙂

Thank you.

[juliantrahe]

1. according to the picture in the mega menu: when do I know which menu item number it is? 🙂

2. Thanks, the breadcrumb color changed.

3. There is one more problem with the images in the mega menu: not the whole image is clickable as a link, I would like to have to whole image to be clickable like an href link.

4. Is there any option of deleting the text out of the menu items? There is still “Hannover” and “Mallorca” in the top corner of the pictures, can I remove it in any way?

Thank you in advance, your support is awesome and fast!

[Paul R]

Hi Julian,

1) I am not sure if I understand this correctly. Would you mind providing us with login credentials so we can take a closer look? Please set your reply as private.

For 3&4
You can add this under Custom > CSS in the Customizer.

.x-nav .x-megamenu>.sub-menu>li>a {
    width:100%;
    height:100%;
    text-indent:9999px;
}

.x-nav .x-megamenu>.sub-menu>li {
    padding:0;
}

[juliantrahe]

This reply has been marked as private.

[Author]

Posts