[SOLVED] Top horizontal menu color of tabs

[dakota_spring]

Hello everybody,

 

i've been wondering if it's possible to change the color of only ONE tab of the top horizontal menu? 

I have those different tabs e.g. Home, Products1, Products2... And a Sale tab as well, which I would like to have marked red to make it more visible. 

Is it possible to change only that part/tab of the top horizontal menu without affecting the color of the whole menu?

 

I'm using Prestashop 1.5.4.1.

 

Thanks in advance!

[vekia]

in default prestashop 1.5.4.1 top menu module it's not possible.

only with some hacks / css styles (css solution allows to add different style for last and first menu item)

[dakota_spring]

could you give me an example of how it could look like?

[vekia]

but what?

jquery code to define unique id/class for each menu element? or css for first and last element change?

[dakota_spring]

I guess it would be better for me to be able to define each menu element so I pick the jquery code.

[PascalVG]

Hi Dakota,

 

try this:

 

in file: /modules/blocktopmenu/css/superfish-modified.css (make backup!):

 

add somewhere:

 

.sf-menu li:nth-child(4) {  
  background-color: #a72;
}

.sf-menu li:nth-child(4) a:hover {
  background-color: #472;
}
 

Where 4 should be replaced with the tab number in your menu (i.e. if third tab, add 3 etc)

 

The colour of the menu item can be changed by changing the #a72 (color for 'normal' menu item) and #472 (colour when hovering over the item)

 

Hope this helps,

pascal 

[dakota_spring]

Great! That worked But there seems to be a little problem... I chose it to be nr. 6 and now on every other menu the 6th element has that different color too... 

[PascalVG]

Hi Dakota,

Do you have a link to your site, so I can see it?

[vekia]

use code with "<" then onli first level items will be with background color

.sf-menu > li:nth-child(2) {  
  background-color: #a72;
}

note that nth-child selector is not supported by all browsers, this is why i think jquery will be better, but more complicated solution

[dakota_spring]

I don't get, where exactly should I put "<"?

[PascalVG]

Hi Dakota, I think Vekia meant '>', not '<', like he a actually used in his example code...

[dakota_spring]

Finally got it, thank you all!

[PascalVG]

Good to hear!

 

I'll mark the topic as solved.

 

Happy selling,

pascal.

[bogdy06]

Perfect!  Thanks Dakota for the question, and Pascal and Prestashop Legend for the answers.