different colors for each menu item at main menu

Hi,
is it possible, to assign different colors for each menu item at main menu?

Maybe you can give me a step by step example for the first menu item.



Thanks a lot

Could you please post an url to your site?

Could you please post an url to your site?

http://dittelbrunn.puls300.de

Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

.gkMenu > ul > li:nth-child(2) {
    background: red;   
}
.gkMenu > ul > li:nth-child(3) {
    background: blue; 
}
.gkMenu > ul > li:nth-child(3) a {
    color: #fff;
}
.gkMenu > ul > li:nth-child(3) li a {
    color: #777;
}
.gkMenu > ul > li:nth-child(4) {
    background: green;   
}


This example show how to set different background to 2,3 and 4 main menu item, and different menu item colour for 3rd item (and bring back original colour for submenu items)
Remember to enable "CSS override" in template settings - advanced section.

WORKS PERFECT!

Thanks a lot

I have a question: and how do I change the menu color when the mouse its over a menu item?
Ps- I know I've already asked in another post but... well I saw this topic and...

You need to add aditional:

Code: Select all

.gkMenu > ul > li:nth-child(2):hover {
    background: green;   
}
.gkMenu > ul > li:nth-child(3):hover {
    background: yellow; 
}


to define hover colours.

works not in Internet Explorer 11!
any idea

Thanks a lot

Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

.gkMenu > ul > li:nth-child(2) {
    background: red;   
}
.gkMenu > ul > li:nth-child(3) {
    background: blue; 
}
.gkMenu > ul > li:nth-child(3) a {
    color: #fff;
}
.gkMenu > ul > li:nth-child(3) li a {
    color: #777;
}
.gkMenu > ul > li:nth-child(4) {
    background: green;   
}


This example show how to set different background to 2,3 and 4 main menu item, and different menu item colour for 3rd item (and bring back original colour for submenu items)
Remember to enable "CSS override" in template settings - advanced section.

Perhaps Ie11 doent support correctly nth-selector. In that case there is nothing that could be done.