This topic has 7 replies, 2 voices, and was last updated 8 years by 
-
-
I am trying to make the header background a dark blue and the top bar black with white font colors on both and a yellowish hover color on both. I am having a heck of a time trying to get that done. I have tried adding CSS to the child theme and even gone into the dynamic file to try and change the base colors as well and nothing works. Also, when I change the colors of the header background, it changes the drop down as well. I just wish there was some more versatility with the styling with the header. Can you point me to the files I might need to change for that? I took the theme down for now and will be reuploading it this weekend. Thank you!
Hi,
Thanks for contacting us about styling the header, you can set all of the options you wish to achieve via Theme Options > Styling Options > Header Styling and settings the options for background color, link color and hover link color.
Once these are set you can use the below CSS to override the colors user in the top menu. Add this CSS to your KLEO Child themes style.css via WP Admin > Appearance > Editor > KLEO Child > Style.css or directly via Theme Options > General Settings > Scroll to: ‘Quick CSS’
COPY CODE.social-header.header-color { background-color: black; } .header-color .top-menu li > a, .header-color #top-social li a { color: #ffffff; }Adjust the color values to suit your design needs.
Make sure to purge your website cache, any CDN and front-end cache (Ctrl+F5) to see any changes.
Thanks,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThank you, that worked great. One other question on this. The background for the drop down navigation is white and the hover color is correct but the text is white against the white background. How do I turn that text black? I am trying to go through the code but cannot isolate it. I have attached a screenshot. Right now, I am doing just a dropdown on the top menu but I will probably have one on the primary as well. thank you!
Hi,
Please try the below CSS snippet to override the color of links in the drop down menu
COPY CODE.header-color .dropdown-menu li a { color: #000000 !important; }Thanks,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThat did the trick to make the dropdown nav text black but the hover color is gone completely. How do I bring that back? Thanks!
Hi,
The hover color should still be there, is the hover color very dark or black? You can add :hover to end to any CSS, in this case please try the below snippet
COPY CODE.header-color .dropdown-menu li a:hover { color: #000000 !important; }Set the # value of 000000 to your desired color.
Thanks,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
Glad this worked for you 🙂 Feel free to open a new ticket any time with any other questions and we’ll be happy to assist.
All the best,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.