How can I change the color of Main Header Text & menu when on Overlay mode
-
I had set a request here: https://xtemos.com/forums/topic/main-menu-font-color-while-on-overlay-mode-and-then-change-when-scroll-down/#new-post and I believe the forum was closed so I could not reply.
The code shared did not work for me. I have text on the overlay main header and a menu Icon. I need the menu Icon and text that are on the header to be white ONLY when on overhead mode. When it’s sticky and it scrolls down, It can go back to the default dark color.
Hello,
Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
.wd-tools-element>a {
color: white;
}
body .whb-sticked .wd-tools-element>a {
color: black;
}
Best Regards.
That was it! Thanks so much!
Actually, it worked on the home page: http://johnneyz2.sg-host.com/
However, on other pages, I do not need the overlay header, so I am using a regular solid color header. I am running into the issue that the header is white and the menu lines are also white due to the CSS code above: http://johnneyz2.sg-host.com/services/
Is there a way to have the white lines (original request) just for 1 header and all other headers are normal? (black menu text/lines/icons)?
Hello,
You are Most Welcome.
Please replace the previous CSS with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.
.page-id-7 .wd-tools-element>a {
color: white;
}
.page-id-7 .whb-sticked .wd-tools-element>a {
color: black;
}
It will only affect the homepage.
Best Regards.
.
