[Support request] Logo appears on wrong menu

Home Forums Support [Support request] Logo appears on wrong menu

Home Forums Support Logo appears on wrong menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2350828
    Terry

    I originally set up a primary menu, named primary. Then, I decided to make it a secondary menu. The site logo now appears in the secondary menu, as you can see at https://cttt.it4causeshosting.org/. I’ve applied the css that you suggest for a center logo in the navbar, and I think that’s what I need to change, but I’m not sure-can you show me what to change?

    #2350927
    Ying
    Staff
    Customer Support

    Hi Terry,

    In your case, I would suggest:

    1. Go to customizer > layout > secondary navigation > navigation location, choose below header.

    2. Go to customizer > layout > primary navigation > navigation location, choose float right.

    Let me know if this works.

    #2350997
    Terry

    That’s essentially what I’ve done, except putting the secondary menu below the header actually places it below the hero image.

    #2351001
    Ying
    Staff
    Customer Support

    Can you do what I suggested and let me have a look again?

    #2351014
    Terry

    That helped the logo problem, although it still looks a little weird when acrolling down. But, the secondary menu is below the hearder image, and I want it between the primary navbar and the hero image.

    #2351017
    Ying
    Staff
    Customer Support

    Are you using a block element for the page hero?

    If so, can you try changing the element’s priority to 20?
    https://www.screencast.com/t/iW7ow3sx

    #2351026
    Terry

    Bingo. But the secondary menu disappears if I scroll down.

    #2351044
    Ying
    Staff
    Customer Support

    Yes, because secondary navigation is not sticky, it will scroll up like other elements on your site.

    If you want it to be sticky with the primary navigation, try add this CSS:

    @media (min-width: 769px) {
    nav#secondary-navigation {
        position: sticky;
        top: 150px;
    }
    }
    #2351053
    Terry

    That didn’t seem to work.

    #2351105
    Ying
    Staff
    Customer Support

    It is sticky now, but your site header height changes too much.

    When this sticky primary navigation is active, the header height is 150px, and my CSS works well.
    https://www.screencast.com/t/jyUjGKBulGu

    But when sticky primary navigation is not active, the header height is only 79px, but the secondary navigation is still at the 150px:
    https://www.screencast.com/t/rgWvRi0CDb

    To solve this issue, we need to make the site header same height, no matter it’s sticky or not.

    In order to do so, can you go to customizer > header, and enable the use navigation as header option?

    #2351606
    Terry

    Ok, did that, now how to adjust position?

    #2351905
    Ying
    Staff
    Customer Support

    Try change the CSS I provided here to this:

    @media (min-width: 769px)
    .navigation-clone + .secondary-navigation {
        position: sticky;
        top: 65px;
    }
    }

    The value 65px is to match what you set at customizer > layout > sticky navigation > Menu Item Height.

    #2351933
    Terry

    Doesn’t seem to help.

    #2351962
    Ying
    Staff
    Customer Support

    So what’s the issue now? The logo on non-sticky navigation doesn’t fully show?

    If that’s the issue, it’s because you’ve set the menu item line-height to 35px using this CSS in your child theme’s style.css:

    @media (min-width: 769px)
    .main-navigation .main-nav ul li a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px;
    }

    Try remove the line-height: 35px; from the CSS.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.