Header Colors

[rcerrone]

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!

[Kieran_SQ]

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 solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[rcerrone]

Thank 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!

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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 solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[rcerrone]

That did the trick to make the dropdown nav text black but the hover color is gone completely. How do I bring that back? Thanks!

[Kieran_SQ]

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 solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[rcerrone]

Worked perfectly, thank you.

[Kieran_SQ]

Hi,

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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts