Show site-logo over header image

Hi there,

Couple options, but first you may want to resize that main image - it takes a while to load as it's pretty big.

1. Set the large image as the header background in "Customize > Background Images".

OR

2. Try this CSS:

.site-logo {
    position: absolute;
    top: 10px;
    left: 10px;
}

Hi Tom,

Thanks for your answer. Bigger images don't bother me while testing :). But thanks for the
heads up.

option 1. It works but I don't get the full height of the image.

option 2. It works but the logo will end up in the menu when resizing to mobile resolution.

Kind regards,

Maarten

Hmm, only way to avoid that is to set the height on mobile:

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

Adjust as needed :)

It's me again.. The only proper way I can get the menu beneath the header image is with Hooks.
[s]Background won't works as the logo is shown under not over the image.[s]

So hooks and your CSS:

.site-logo {
position: absolute;
top: 10px;
left: 10px;
}

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

Problem with this solution is the small logo in the menu when scaling to mobile is not centered and almost 'falling' off the menu.

Feeling a bit guilty with all my specific questions..

Hi Maarten. I just took a look at your site but don't see the "small logo in the menu" you mentioned above. Is it on the site you linked in your original post?

Hi bdbrown,

I had the settings to mobile only; you should see it now. Thanks for viewing.

Kind regards,

Maarten

Give this css a try and see what you think:

@media (max-width: 768px) {
    .main-navigation .sticky-logo {
        padding: 0 !important;
        margin-left: 40% !important;
    }
}