Hello everyone,
I would like to have different colour for each title in the main menu. Do you know how can I do that?
Thanks!
and the line under the title to have the same colour as the title in the menu of course…
Hi,
Please provide a link to your site so i can inspect it and see the header style that you use. There is no universal code for this. It has to be done on your specific case.
Thank you!
This is the link: http://promoplovdiv.com/wp-content/uploads/2016/06/Untitled-1.jpg
I would like to customize different colour for each main menu item. For different colour I mean the title and the line below the title.
Hi,
I’m not sure I understand this correctly so I’m going to provide both solutions.
If you want ALL menu items to be the same color only a different one, it can be changed from the theme panel here: http://screencast.com/t/OHQU7aVpwv
If you want to have different colors for different menu items (you only have one at the moment) then you need to use css like for example , for your current menu item You will have to use this code:
.menu-item-741 a{
color:Red!important;
}
.menu-main-menu-container .sf-menu .menu-item-741 a:after{
background-color:red!important
}
Every menu item has it;s own class with a unique number to it. You can use this code for other menu items and just change the color and the number in the code to match the menu item class number.
I hope this helps
Thank you!
Thanks,
the code:
.menu-item-741 a{
color:Red!important;
}
helps for the menu title color, but is it possible to change and the line under the title too, i mean is there a chance to hava the same colour for the title and for the line under the title, because it don’t looks good when the title is red and the line below is orange or another colour
Hi,
I provided 2 pieces of code, not just the one you mention. The second one in my reply above is for the underline.
Thanks.
Sorry, my false, yes it works!
Thanks!
Hi bogdan, I use your 2 pieces of code provided but the bottom line doesn’t change color, only the menu item…what I wrong?
this is my custom css (where 999 is my menu item id):
.menu-item-999 a{
color: #ef3472!important;
}
.menu-main-menu-container .sf-menu .menu-item-999 a:after{
background-color: #ef3472!important
}
Hello,
Please make sure you do not have any errors in your custom css box. Make sure the above css is closed properly and make sure you clear cache and reset cdn files after you add the code. If the codes till does not work, provide a link to your site and provide an example of what menu item you are referring to so I can test the code on your site directly. You can try it to using chrome’s ‘live css editor’ extension.
Thank you!
Hi bogdan, I did all your suggest but I can’t find the problem…follow the link to the site:
http://bit.ly/2f5qfSP
the item menu is RUBRICHE in main menu.
thank you very much
Hi,
It seems to work just fine: http://screencast.com/t/3BJuYlbMJ4h7
You did not clear the cache after you added the code. Or there is a caching on your server you did know about or forgot it was there. The menu item has already changed color on your site.
Thanks
Hi bogdan, I know it works but I mean the green bottom border (mouse hover effect) on RUBRICHE item…I would it same color of RUBRICHE…I hope I was clear.
Tnx
Hi,
Please remove your previous code (the second part) and replace it with this one:
.menu-main-menu-container .sf-menu .menu-item-999 a:after{
background-color: #ef3472!important
}.sf-menu > .menu-item-999 .current-menu-item > a:after, .sf-menu > .menu-item-999 .current-menu-ancestor > a:after, .sf-menu > .menu-item-999 .current-category-ancestor > a:after, .sf-menu > .menu-item-999 > a:after, .sf-menu > .menu-item-999 .sfHover > a:after, .menu-item-999.sfHover a:after, .sf-menu>.menu-item-66.current-menu-item>a:after, sf-menu>.menu-item-999.current-category-ancestor>a:after {
background-color:#ef3472!important;
Thanks.
Thank you bogdan,
finally I get the right code, follow my working final code if it could help other users:
.menu-item-999 a{
color: #ef3472!important;
}
.menu-main-menu-container .sf-menu .menu-item-999 a:after{
background-color: #ef3472!important;
}
.sf-menu > .menu-item-999 .current-menu-item > a:after,
.sf-menu > .menu-item-999 .current-menu-ancestor > a:after,
.sf-menu > .menu-item-999 .current-category-ancestor > a:after,
.sf-menu > .menu-item-999 .sfHover > a:after,
.menu-item-999.sfHover a:after,
.sf-menu >.menu-item-66.current-menu-item>a:after,
.sf-menu >.menu-item-999.current-category-ancestor>a:after {
background-color:#ef3472!important;
}
