[SOLVED] Change single item color of block top menu

[Guixe94]

Hello,

 

I use the block top menu in my shop, and I have 6 items that redirect to a specific link.

 

I change all the text color of all the items to orange, but i want to change the color of all of the single items. For example: item one color blue, item two color green, etc.

 

I want to change the text color and also the background color o every item if it's posible, how i can do that?

 

 

Thanks! and sorry for my bad english..

[vekia]

what prestashop version you use and what theme?

you use default block top menu module?

also, is there any chance to see it live?

[Guixe94]

what prestashop version you use and what theme?

you use default block top menu module?

also, is there any chance to see it live?

 

I use 1.6.9 and the default theme and module. I have it on localhost so i can´t share it at the moment..

Edited January 11, 2015 by Guixe94 (see edit history)

[vekia]

so, if it is default one - it will be a little hard.

anyway, you're reffering only to main menu items or also to subcategories etc. ?

[Guixe94]

so, if it is default one - it will be a little hard.

anyway, you're reffering only to main menu items or also to subcategories etc. ?

 

Only menu items, y don't have any subcategorie because the items redirect to specific url's and no to categories.

[vekia]

in global.js file use this:

$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});

then each menu item will have own unique class like yourClass0, yourClass1 etc.

based on this you will be able to create unique styles for <a> element - it means that you will be able to change background etc.

 

.yourClass1 a {

background:red:

}

 

etc.

[Guixe94]

in global.js file use this:

$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});

then each menu item will have own unique class like yourClass0, yourClass1 etc.

based on this you will be able to create unique styles for <a> element - it means that you will be able to change background etc.

 

.yourClass1 a {

background:red:

}

 

etc.

 

Thanks i'm going to try it.

 

This:

.yourClass1 a {

background:red:

}

 

I have to put in global.css? or in another css?

[vekia]

personally i use it in module file. i suggest to use blocktopmenu.css or superfish-modified.css (file is located in your theme directory)

[Guixe94]

personally i use it in module file. i suggest to use blocktopmenu.css or superfish-modified.css (file is located in your theme directory)

 

i put this at the en of public_html/tienda/themes/default-bootstrap/js/global.js:

$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});

and on the public_html/tienda/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css I added this at the end: 

   .yourClass1 a {
color:red:
}

 .yourClass2 a {
color:red:
}

But nothing happens in the menu..

[vekia]

ctrl+f5 to refresh browser cache

if it will not work use !important modifier

 

.yourClass2 a {

color:red!important;

}

 

btw. color is only font text

try to deal with background too:

 

.yourClass2 a {

color:red!important;

background:yellow!important;

}

it's worth to replace 
code:

$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});

with

 

$(document).ready(function(){
$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});
});

[Guixe94]

 

ctrl+f5 to refresh browser cache

if it will not work use !important modifier

 

.yourClass2 a {

color:red!important;

}

 

btw. color is only font text

try to deal with background too:

 

.yourClass2 a {

color:red!important;

background:yellow!important;

}

it's worth to replace 

code:

$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});

with

 

 

$(document).ready(function(){
$('.sf-menu li').each(function(i,j) {
   $(this).addClass('yourClass'+i);
});
});

 

 

Thaaanks!!! Now works fine!

[vekia]

great :-)

glad to hear that i could help

i marked topic as solved

with regards,

milos

[EDAPO]

In version 1.6.1.1 I am not able to use this solution.

Theme: millenium

Any idea?

Edited October 17, 2015 by EDAPO (see edit history)

[Ray UK]

Working fine in 1.6.1.2 for me see www.no-match.co.uk

 

However,if we were to add a new menu item then we would have to alter the css code to reflect the new menu class number.

 

Vekia, is there any way to add the menu title to the class instead of a number ?

 

so the class would read "yourClass-sale" instead of "yourClass-26"

 

edit:also, what about the active menu state.

It adds .sfHoverForce to the class and reverts back to the original colour of the main menu items.

Cheers

Ray

Edited November 25, 2015 by MerseyRay (see edit history)