I want to change the hover color and style of my website like the one showed in the website. I want to show the accentg color of the theme in the menu. Please help me to do so…
Please look at this website:
I want to change the menu black on hovering with the same style as shown in the website
Hello,
You can change the menu hover colors from the theme colors section: https://www.screencast.com/t/KjbI1gO8yCDR
Thank you!
Dear, I am trying to play with the menu coloring options, but still not achieve what I am looking for. How can I change the menu hovering style if I place cursor on Menu?
Hi,
With the current header and version of Newspaper theme you’ll need to add a custom css in order to acheive that -> https://www.screencast.com/t/eBF9TmsgVj
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
color: red;
}
Newspaper Theme 9.5 Update: What’s new in the Newspaper Theme -> https://tagdiv.com/whats-new-in-newspaper-theme-9-5-update/
Thank you!
Dear, it didn’t serve my purpose. Plz take a look at this website. I want to change the hovering color and style like the one showed in website.
Hi,
So you want to have background color on menu hover, if is so please try this custom css
https://www.screencast.com/t/E0SYDaS8r
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
background-color: red;
}
Feel free to change the color.
Thank you!
Dear, I want to use the menu hovering style like the one used in the given website. The code only changes the color as sudden box. It didn’t changed in to a hovering style…
Hi,
Unfortunately I can not reproduces the same hover effect, but I think this one will do the work too.
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
background-color: lightgray;
transition: 2s ;
}
-> https://www.screencast.com/t/7wLtSmFIQ35
Thank you!
Dear, this guy also uses the newspaper theme. Could you please specify me what settings exactly he has done to achieve this effect?
Plz take a look by yourself and also inspect it. I want the same hovering style result in my website too. Now I think it shouldn’t have any problem for you anymore…
Plz check this:
Hi,
This style comes from News Magazine -> https://demo.tagdiv.com/newspaper_magazine/
Please try this custom css
.td-header-style-10 .td-header-gradient::before {
height: 5px;
position: absolute;
bottom: 0;
background-color: #339990;
}
.td-header-style-10 .sf-menu > li > a::after {
height: 100%;
z-index: -1;
}
.td-header-style-10 .sf-menu > .td-menu-item > a {
margin-bottom: 5px;
}
.sf-menu a:active, .sf-menu a:hover {
color: white;
}
Thank you!
Dear, the code works well, but I want to set the background color to 339990 and the hovering color as black as showing in the website
The background color should be 339990 but the hovering style color should be black. Hope you understand…
Hi,
Please replace the above custom css with this one:
-> https://www.screencast.com/t/yCL1t3NJ
.td-header-style-10 .td-header-gradient::before {
height: 5px;
position: absolute;
bottom: 0;
background-color: #339990!important;
}
.td-header-style-10 .sf-menu > li > a::after {
height: 100%;
z-index: -1;
background-color: black;
}
.td-header-style-10 .sf-menu > .td-menu-item > a {
margin-bottom: 5px;
}
.sf-menu a:active, .sf-menu a:hover, .sf-menu a {
color: white!important;
}
.td-header-wrap .td-header-menu-wrap-full {
background-color: #303030;
}
.td-header-style-10 .header-search-wrap .td-icon-search {
color: white;
}
Thank you!
Dear, you have done the magnificent work and the code works perfect, but there are two small problems.
1) The text of menu category also turns white and it is not visible anymore. Plz keep keep the menu text white, but change the category text to black for visibility.
2) Please change the background color of the menu to 339990, it is not black at this time.
Plz take a look at the pic
3) The color of the sticky menu doesn’t change. Plz fix it.
Hi,
Please try this code
-> https://www.screencast.com/t/zJjL2KWs94Pa
-> https://www.screencast.com/t/aOY8OTTa
.td-header-style-10 .td-header-gradient::before {
height: 5px;
position: absolute;
bottom: 0;
background-color: #339990;
}
.td-header-style-10 .sf-menu > li > a::after {
height: 100%;
z-index: -1;
background-color: #303030;
}
.td-header-style-10 .sf-menu > .td-menu-item > a {
margin-bottom: 5px;
}
.sf-menu a:active, .sf-menu a:hover, .sf-menu a {
color: white!important;
}
.td-header-wrap .td-header-menu-wrap-full {
background-color: #339990;
}
.sf-menu > li > a {
color: white;
}
.sf-menu ul .td-menu-item > a {
color: black;
}
.td-header-menu-wrap.td-affix {
background-color: #339990;
}
Thanks.
Dear, I don’t know why but the given code didn’t solve the color of the gallery text at my side. It still shows white to me… Plz take a look at the pic…
Dear, also try to change the search bar icon to white color, as it is black.
Plz take a look at the pic
2) I also want to change the color of this menu line somewhat darker than the background color. Plz take a look at the pic.. indicated by yellow arrow in the pic…
3) Plz replace the color 339990 with the color code #1A6D66. As it looks fine with me…
Hope you understand…
Hi,
This custom css should do the trick, please replace the above custom css for menu with this one, after that clear alll cache and try with other browsers too.
.td-header-style-10 .td-header-gradient::before {
height: 5px;
position: absolute;
bottom: 0;
background-color: #339990!important;
}
.td-header-style-10 .sf-menu > li > a::after {
height: 100%;
z-index: -1;
background-color: black;
}
.td-header-style-10 .sf-menu > .td-menu-item > a {
margin-bottom: 5px;
}
.sf-menu a:active, .sf-menu a:hover, .sf-menu > li > a {
color: white!important;
}
.sf-menu ul .td-menu-item > a {
color: black!important;
}
.td-header-wrap .td-header-menu-wrap-full {
background-color: #303030;
}
.td-header-style-10 .header-search-wrap .td-icon-search {
color: white;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search {
border-color: #e9e9e9;
border-width: 0 1px 1px;
border-style: solid;
box-shadow: none;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search:before {
border-color: transparent transparent #009688;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search:after {
top: -5px;
height: 5px;
background-color: #009688;
}
https://www.screencast.com/t/ybH4nFJN
Hope this will help you achieve what you need!
Thanks!
Dear, the given code solve the problem of Menu Category and Search bar Icon color, but the background color is again black. Please look at the pic;
2) The color of sticky menu doesn’t changes. Plz take a look at the Pic.
Hope you understand.
Rest seem fine dear.
Hi,
Sir this will be more easy if you can provide me your credentials for admin login, please send us an email at contact@tagdiv.com and provide admin login.
I will make the right changes in css code. Include a link to this topic in the email.
Thank you for your understanding!
Dear, you don’t have to worry. The code works perfect I just want to change the background color and optimize the sticky menu.
Hi,
Please try this custom css
-> https://www.screencast.com/t/9HjUKngF9tuL
.td-header-style-10 .td-header-gradient::before {
height: 5px;
position: absolute;
bottom: 0;
background-color: #339990;
}
.td-header-style-10 .sf-menu > li > a::after {
height: 100%;
z-index: -1;
background-color: #303030;
}
.td-header-style-10 .sf-menu > .td-menu-item > a {
margin-bottom: 5px;
}
.td-header-wrap .td-header-menu-wrap-full {
background-color: #339990;
}
.sf-menu ul .td-menu-item > a {
color: black;
}
.td-header-menu-wrap.td-affix {
background-color: #339990;
}
.sf-menu ul .td-menu-item > a {
color: black!important;
}
.td-header-style-10 .header-search-wrap .td-icon-search,
.sf-menu > li > a ,
.sf-menu a:active, .sf-menu a:hover {
color: white;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search {
border-color: #e9e9e9;
border-width: 0 1px 1px;
border-style: solid;
box-shadow: none;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search:before {
border-color: transparent transparent #009688;
}
.td-header-style-10 .header-search-wrap .td-drop-down-search:after {
top: -5px;
height: 5px;
background-color: #009688;
}
Thank you for your understanding!
Dear, this time the code works like a charm. Thankyou for your valuable co-operation.
Regards,
