Apply css style for individual menu item

[Rutger1973]

Hi guys,

I need to style my menu items individually. I've been looking on the interweb and honestly cannot believe that I couldn't find any decent posts about this.

I need to show a transparant image on hover and on the active state. Every menu item has a different image. Can you help me with the CSS code? I presume I need to work with menu ID's?

www.testeenwebsite.nl

All help highly appreciated

Thanks!

[effrit]

Code: Select all

.item-101.current{
    background: url(/images/projecten/Project-Welgelegen-stadsvilla-en-serre.jpg);
}

you already have classes for menu items like item-101 so just use them.

add .current to select active state.

[Rutger1973]

Hi Effrit,

Thanks for your reply but this doesn't make any sense to me. I have not made this class, certainly not for the menu items. I also cannot find this code in the css files...

[effrit]

You must learn about how css work.
I give you exactly what you asking but now you ask me teach you about css basics?
You cant find this code because you must add it by yourself in template .css file or in template special textarea if your template support it this way.
And Joomla making custom classes for menu items (at least your menu module do it), so you must just open page code or inspect menu item to figure it out.

[Rutger1973]

Hi Effrit... gotcha! thanks...got it up and running. Now I have to figure a way out to show the same on mobile but I will manage. Thanks again!