Hello Newspaper team,
I’m working on the them and i’m struggling to change the header menu styles.
I’m using the “Header Style 12” and would like to get the hover/current effect from light header templates (Style 1, 2 or 7) where the link is underlined and not filled with a background.
By the way, I’d also like to set the same color for the search box highlight line (which is blue).
How can I achieve this ? I tried lots of solutions in the forums but still with no luck !
Thanks.
Hello bpepermans,
Please try the code below and add it in Theme panel->Custom CSS area, like this -> http://screencast.com/t/db6vdeEAvk
.td-header-style-12 .td-header-menu-wrap .sf-menu > li > a:after {
display: block;
}
.sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: red;
}
.header-search-wrap .td-drop-down-search:before {
border-color: transparent transparent #EC4D4D transparent;
}
.header-search-wrap .td-drop-down-search:after {
background-color: red;
}
The result you should see here -> http://screencast.com/t/nkbXfbDS3
I set the border color to red, but you can modify the code to any color you want it to display.
Thank you for the message!
This works like a charm !
In order to have a lighter CSS file, do I risk much by removing header styles and block styles not used in my website ? I’ll check at every update to remove the same “generic styles” that won’t be used. Do you believe this is a good idea ?
Hello,
I think you will not do much by removing a few styles you do not use from the css file. It’s a bit of an overkill for insignificant improvements. In order to reduce the size of the css, you will have to remove quite a big amount of code and in the process you will risk removing parts of it that may be needed on your website.
Thank you!
