Jump to content

[SOLVED] Top horizontal menu color of tabs


Recommended Posts

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


Thanks in advance!

Link to comment
Share on other sites

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,


Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...