Header and Menu customizations

  • Resolved ljugan

    (@ljugan)


    10 years, 10 months ago

    Hello,
    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!
    laurajugan.com

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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. https://css3gen.com/text-shadow/

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

    Kadence Themes

    Thread Starter ljugan

    (@ljugan)

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header and Menu customizations’ is closed to new replies.