Logo appears on wrong menu

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.

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

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

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.

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

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

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;
}
}

That didn't seem to work.

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?

Ok, did that, now how to adjust position?

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.

Doesn't seem to help.

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.