Positioning logo

Ok, I think I have done a poor job of explaining what I really want to do, or even understanding it myself. I want to have a logo in the Header area, not really necessary to overlap, just sit nicely inside header. I assume a logo in the header area will be resized accordingly on mobile?

But on desktop when the user scrolls down the page the header and it's logo disappears and a small version of the logo appears on the primary menu which sits at top of page as it scrolls down.

Is this possible without all the overlapping I am doing? I think that is where I have gotten myself into trouble. Sorry for round about way of getting to what I really want

Thank you

Your logo is already displaying in the sticky menu as you scroll down?

As for resizing your main logo on mobile, you can do this:

@media (max-width:768px) {
    .site-logo img {
        max-width:250px;
    }
}

Ok, I am closer to what I really have wanted. I have moved my logo from the Primary Menu to the Header area, i.e. a straight up logo in the Header area. This shows great on the desktop and mobile. I'm happy!

Only thing now I'd like to do is add a different logo to the Primary navigation but it only activates on desktop when user scrolls down. So if header is visible the primary navigation logo is not visible. Then when user scrolls down and Header is hidden the primary navigation logo would appear. How can I control the primary navigation logo like this?

Thanks for your patience Tom! I'm almost there!

Mark

Well dang, that's what sticky does. This has been staring me right in the face this whole time. Logo in header, primary nav logo set to sticky. Dang... this is exactly it. It would help if I explained what I want better. I am sorry Tom.

I'm all set, thank you

No problem! Glad you got it working :)