[Support request] How to create a separator line below header

Home Forums Support [Support request] How to create a separator line below header

Home Forums Support How to create a separator line below header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2026850
    Jordan

    Hi,

    I’m trying to add a simple gray separator line below my header. I want this line to have no padding so that it appears directly below my navigation and when the navigation is hovered, the hovered line directly below the hovered menu item will above the full width separator line.

    See screenshot… and my site below.

    I’ve created a block element to try to accomplish this with a hook set to “after-header” but the separator line that is in the block doesn’t want to bump up against the bottom of the header…it’s almost like the block itself has padding that needs to be overwritten just for this element/block. Or is their another hook I can specify that will not add padding? Changing the hook to after-navigation doesn’t seem to work.

    How can I most easily accomplish the picture shown in the screenshot with the hover effect for the active menu item etc.

    Thank you!

    #2026909
    Ying
    Staff
    Customer Support

    Hi Jordan,

    Try this CSS, it will remove all the separator’s margin sitewide.

    body hr.wp-block-separator {
        margin: 0;
    }

    Let me know if you only want it applies to this specific separator.

    #2029937
    Jordan

    Thank you, this works perfectly, but I need one additional feature.

    How can I get the line to change color below the hovered and active menu item?

    In other words, if Products is hovered or active, it would like like the screenshot attached in the private info…

    Please include a way that I can alter the line color or effect for both he active and hovered states.

    Thank you!!

    #2030030
    Ying
    Staff
    Customer Support

    Give this CSS a try:

    .inside-navigation.grid-container {
        display: flex;
        align-items: center;
    }
    
    .main-nav .jet-menu-inner > ul > li:hover > a:after, .main-nav .jet-menu-inner > ul > li> a:active:after{
        content: "";
        width: 100%;
        position: absolute;
        bottom: -2.5px;
        height:3px;
        background-color: blue;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.