Okay
  Public Ticket #2815437
Header customizations
Closed

Comments

  •  30
    lumpy5000 started the conversation
    June 30, 2021 at 8:09pm

    Hello. I am trying to make some changes in the header, but cannot find the settings. I would like to do the following: 

    1) Change the amount of spacing between each menu item.

    2) Change the color of the navigation text on rollover, AND change the color of the Animated Underline on rollover. 

    3) Change the amount of spacing between the menu text and the Animated Underline. 

    4) Can the Animated Underline start from the center-out instead of left to right?

    5) Add more padding inside of the CONTACT US button at the top-right. So the text would stay the same, but the overall button will be larger. 

    Are these things possible within Salient settings or Custom CSS? Thank you. 

  •  8,847
    Tahir replied
    July 1, 2021 at 10:27am

    Hey Again,

    1 and 2 . These can be adjusted in the Salient Theme Options Panel -> Header Navigation Section.

    3. Try adjusting the "line-height" in the Typography Section for the "Navigation Font"

    4 and 5. Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /* Animated Underline start from the center-out */
body #header-outer[data-lhe="animated_underline"] #top nav >ul >li:not([class*="button_"]) >a .menu-title-text:after, body #header-secondary-outer[data-lhe="animated_underline"] nav >.sf-menu >li:not([class*="button_"]) >a .menu-title-text:after, body #header-outer[data-lhe="animated_underline"] .nectar-header-text-content a:after, .sf-menu li ul li a .menu-title-text:after {
    -webkit-transform-origin: center !important;
    transform-origin: center !important;
}
/* more padding inside of the CONTACT US button */
#header-outer[data-lhe="animated_underline"] #top nav > ul > li[class*="button_solid_color"] > a span {
    padding: 40px;
}

    Thanks

    ThemeNectar Support Team 

  •  30
    lumpy5000 replied
    July 1, 2021 at 4:53pm

    Thank you for your reply. 

    For #1. I found it. Thank you!

    For #2. I am able to see and adjust these settings for the standard header and sticky header, but NOT for the transparent header seen in the URL I sent. As you'll see, the animated underline color is still white. I would like for this to be orange (#ca5f2c). 

    For #3, unfortunately, changing the line-height of the navigation font did not affect the spacing between the menu text and animated underline. I even cleared my cache. 

    For #4, your code worked perfectly. Thank you.

    For #5, thank you, that worked in creating horizontal space, but didn't help with vertical spacing. I tried amended code (see below) to extend the padding on all sides, but it still only worked horizontally (14px):

    padding: 34px 14px 34px 14px !important;

  •  1,878
    Judith replied
    July 1, 2021 at 5:15pm

    Hi There,

    For Q2, Please try this css:

    #header-outer[data-lhe="animated_underline"].transparent #top nav > ul > li > a .menu-title-text:after, #header-outer.transparent #top nav>ul>li[class*="button_bordered"]>a:before {
        border-color: #ca5f2c !important;
    }

    For Q3, Please try this css:

    body #header-outer[data-lhe="animated_underline"] #top nav >ul >li:not([class*="button_"]) >a .menu-title-text:after, body #header-secondary-outer[data-lhe="animated_underline"] nav >.sf-menu >li:not([class*="button_"]) >a .menu-title-text:after, body #header-outer[data-lhe="animated_underline"] .nectar-header-text-content a:after, .sf-menu li ul li a .menu-title-text:after {
        bottom: -9px;
    }

    Thanks.

  •  30
    lumpy5000 replied
    July 1, 2021 at 5:21pm

    Thank you, these worked perfectly for #2 and #3. Any thoughts on #5? Is there any way to add vertical spacing/padding into the CONTACT US button? Thank you. 

  •  1,878
    Judith replied
    July 1, 2021 at 5:29pm

    Hi Lumpy,

    Please try this css:

    #top nav > ul > li[class*="button_solid_color"] > a:before, #header-outer.transparent #top nav > ul > li[class*="button_solid_color"] > a:before, #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
        height: 36px;
    }

    Thanks.

  •  30
    lumpy5000 replied
    July 1, 2021 at 5:32pm

    Perfect. Thank you so much!!