Greetings!
I did my search but I can’t find the answer yet.
What I want is my main menu items to be coloured background on mouse hover.
Example: http://www.athinorama.gr
Any idea how to achieve this?
Color settings from theme only apply on fonts
Thanks in advance
Hello,
This can only be done with css. There is no setting in the theme panel for such a feature. You will first need to use a header style that uses a background highlight on hover (not an underline) https://forum.tagdiv.com/header-styles/ Then the hover color can be changed with a css code for each element in particular. Please refer to this topic: https://forum.tagdiv.com/topic/main-menu-different-colours/
Thank you!
Thanks for your reply,
Is it possible through css editing to keep the big (full) logo on top or bottom like on styles 10 or 11 but also keep a background highlight on hover instead of underline like on styles 1,3,4,5 etc?
Every style with background highlight on hover has small logo on the side.
Thanks in advance!
Hi,
You can try this code for Header style 10 (for Header style 11 change the first class number to 11 in each of the lines), just enter it in Theme panel->Custom Css
.td-header-style-10 .td-header-main-menu .sf-menu > li > a:after {
height: 0;
}
.td-header-style-10 .td-header-main-menu .sf-menu > li > a {
color: black;
}
.td-header-style-10 .td-header-main-menu .sf-menu > li > a:hover {
background-color: #4db2ec;
}
.td-header-style-10 .td-header-main-menu .menu-item-first a:first-child {
background-color: #4db2ec;
}
Please let me know if this works for you
Thanks
Hey, thanks for your reply!
It’s very close to what I am trying, only problems are that the color spreads on the first category posts preview too
(img https://snag.gy/PxJj2K.jpg)
And that when I select another page from main menu, the first item of the menu is still selected/coloured
(img https://snag.gy/TjDs9N.jpg )
It’s still nearly there! any suggestions?
I managed to get the code so that when I select another category it gets colored as well
.td-header-style-10 .td-header-main-menu .current-menu-item {
background-color: #4db2ec;
}
I removed the first child option and the “spread” of color to the preview of the articles dissappeared as well.
Full code now is .td-header-style-10 .td-header-main-menu .sf-menu > li > a:after {
height: 0;
}
.td-header-style-10 .td-header-main-menu .sf-menu > li > a {
color: black;
}
.td-header-style-10 .td-header-main-menu .sf-menu > li > a:hover {
background-color: #4db2ec;
}
.td-header-style-10 .td-header-main-menu .current-menu-item {
background-color: #4db2ec;
}
which works fine for me.
So from here, how can I set custom color codes per menu item?
I can see each menu item had an ID of some kind but can’t get it in css yet.
f.e menu-item menu-item-type-taxonomy menu-item-object-category td-menu-item td-mega-menu menu-item-393
Thanks in advance
Hi,
Please provide a link to your site so we can inspect the menu and fiddle with the css a bit and we will provide the proper code for changing each menu item’s hover color.
Thank you!
It’s http://robotaki.gr/ I was having a countdown but I ‘ve disabled for now so you can take a look
Thanks in advance
Hi,
Try this code:
.menu-item-395 > a:hover{
background-color:red!important;
}
.menu-item-393 > a:hover{
background-color:green!important;
}
.menu-item-394 > a:hover{
background-color:yellow!important;
}
.menu-item-392 > a:hover{
background-color:pink!important;
}
Thank you!
