Reply To: Float Logo and adjust size and position keeping it responsive

[Tom]

Hi Brad,

Definitely do-able 🙂

1. Disable your header:

.site-header {
    display: none;
}

2. Upload a logo to your navigation in “Customize > Layout > Primary Navigation” and set it to “Static + Sticky”.

3. Set your navigation logo to be absolute so it’s not confined to the container:

.main-navigation .sticky-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
}

4. Set the height of the image to auto (or whatever you like):

.main-navigation .sticky-logo img {
    height: auto;
}

And here’s what you end up with: http://www.screencast.com/t/OpfbO04f9pyV