[resolved] Header and Menu customizations (3 posts)

  1. ljugan
    Posted 1 year ago #

    I am trying to customize my header and menu functionality in the following ways:

    1. Increase the spacing between the header and tagline

    2. Change the menu hover color - I updated the color setting of the "20% lighter than Primary Color" in the "Basic Styling" section of the Theme Options, but this only changed the hover color of the sidebar links and blog snippet "Continued" link, but not the blog snippet "posted in" category link or the site menu hover color.

    3. Put an outline color around the text of the active menu item (not a highlighted background for the menu item, but more of a border around each letter of the word). Is this possible?

    Thank you in advance for any help!

  2. Kadence Themes
    Theme Author

    Posted 1 year ago #

    1. I am assuming you mean the logo/site title and tagline. Add this css to your custom css box in the theme options:

    .kad_tagline {
    margin-top: 10px;

    2. Your Primary Color color sets the hover color for some things. like the posted in and the menu.

    You can edit directly with this css though:

    #nav-main ul.sf-menu a:hover {
    color: #011666;

    3. "a border around each letter of the word" the only thing close to that is like a text shadow done with css3. http://css3gen.com/text-shadow/

    But I'm not sure if that is what you mean?

    Kadence Themes

  3. ljugan
    Posted 1 year ago #

    Thank you so much for your help! Each of those solutions worked great.

    For #3, I searched using your suggestion of text-shadow and found this which did exactly what I was looking for:

    p {
        color: #fff;
        text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;

    Thanks again!!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic