Docs

[Mrinal]

Hi Julian,

You’ve to use Inspect Element feature of browser (Press: CTRL/CMD +U) to get the Menu Items ID as shown on the screenshot below:

[juliantrahe]

Allright, cool. Thanks! 🙂

[juliantrahe]

This reply has been marked as private.

[Zeshan]

Hi Julian,

Thank you for writing in!

Instead of using the IDs, I’d advise insert your custom CSS class to the menu item you need to target (see: http://prntscr.com/4eqrrt). So let’s say you want to add background image to “Hannover”, you can simply assign a class hannover-menu-bg to this menu item. Next you can use it in the CSS as shown below (a simple manipulation into the CSS code we’ve provided earlier):

.x-nav li.hannover-menu-bg a {

   /* This will hide the text from this item */
   text-indent: -99999px;
   text-align: left !important;

   display: block !important;
   background-image: url(URL-to-your-image);

   /*  The rest of styling goes here  */   

}

Replace hannover-menu-bg class to new menu item you want to add background image and URL-to-your-image with your image’s URL.

Using the above CSS code will also make the menu item completely clickable.

Hope this helps. 🙂

Thank you.

[juliantrahe]

That was a good idea!

This is the code i put into the custom CSS:

.x-nav li.hannover-menu-bg a {

   /* This will hide the text from this item */
   text-indent: -99999px;
   text-align: left !important;

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Hannover.png);
background-repeat:no-repeat;
background-size: 582px; height:120px;
   /*  The rest of styling goes here  */   
}

.x-nav li.mallorca-menu-bg a {

   /* This will hide the text from this item */
   text-indent: 99999px;
   text-align: left !important;

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Mallorca.png);
background-repeat:no-repeat;
background-size: 582px; height:120px;
   /*  The rest of styling goes here  */   
}

The text is still in the menu and not the whole image is shown, though I defined the height…

Here you can see the menu: http://www.vegception.de it is the right “Restaurant” menu item.

How to fix that? 🙂

Thanks!

[Rad]

Hi Julian,

The texts is part of those images I think 🙂

The other one is a sub menu, please remove it.

Thanks!

[juliantrahe]

Hey, that not what I mean 😀

Here is an screenshot of it:

Thanks! 🙂

[Rad]

Hi Julian,

Okay, try using text-indent: -9999px;. This will offset your text to the left.

And you might want to add overflow: hidden; to make it sure.

Cheers 🙂

[juliantrahe]

This reply has been marked as private.

[Rad]

H Julian,

I just checked, and there is another css that override your css. Please add !important at your styling.

text-indent: -99999px !important;
overflow: hidden !important; 

I just tried and it works. You have to clear your plugin’s cache after adding these changes.

Thank you.

[juliantrahe]

I cleared all caches and added this text:

.x-nav li.hannover-menu-bg a {

   /* This will hide the text from this item */
 text-indent: -99999px !important;
overflow: hidden !important; 
   text-align: left !important;

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Hannover.png);
background-repeat:no-repeat;
background-size: 582px; height:120px;
   /*  The rest of styling goes here  */   
}

.x-nav li.mallorca-menu-bg a {

   /* This will hide the text from this item */
  
   text-align: left !important;
text-indent: -99999px !important;
overflow: hidden !important; 

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Mallorca.png);
background-repeat:no-repeat;
background-size: 582px; height:120px;
   /*  The rest of styling goes here  */   
}

How can I do it, that the whole image is shown? The height is allready defined 120px. Where is my problem?

Thanks!

[Zeshan]

Hi Julian,

Thank you for writing in!

This is just an issue of CSS rule priorities. To fix this, simply use !important after defining height in the above CSS code. For example:

height: 120px !important;

And the above CSS would become:

.x-nav li.hannover-menu-bg a {

   /* This will hide the text from this item */
   text-indent: -99999px !important;
   overflow: hidden !important; 
   text-align: left !important;

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Hannover.png);
   background-repeat:no-repeat;
   background-size: 582px; 

   height:120px !important;

   /*  The rest of styling goes here  */   
}

.x-nav li.mallorca-menu-bg a {

   /* This will hide the text from this item */
  
   text-align: left !important;
   text-indent: -99999px !important;
   overflow: hidden !important; 

   display: block !important;
   background-image: url(http://www.vegception.de/Daten/Mallorca.png);
   background-repeat:no-repeat;
   background-size: 582px;
 
   height:120px !important;

   /*  The rest of styling goes here  */   
}

Hope this helps. 🙂

Thank you.

[juliantrahe]

Yes, that worked! Thanks!

Next problem is: If I add a post to the menu below one of the site, the post has the background image too.

I want it to look like the left menu “Restaurants”:

http://vegception.de

Thanks!

[Zeshan]

Hi Julian,

Thank you for writing in!

This will require a little modification in the CSS class. You just need to add a < sign after the CSS class. For example, replacing the following line of code:

.x-nav li.hannover-menu-bg a 

with:

.x-nav li.hannover-menu-bg > a 

Hope this helps. 🙂

Thank you.

[juliantrahe]

Perfect, works fine! Thank you! 🙂

[Author]

Posts