[Resolved] Show site-logo over header image

[Maarten Maakt]

I would like to have 1 image for the whole website. I’ve accomplished this with the ‘Before header content’ PHP line found on the forum here. But I want to have the Site logo on top of this. So when viewed responsive it’s independent of the image. For now I get first the header image, then the logo.

http://vandijk-tuinen.nl/lab/

Site-logo: Customizer
Header image: PHP before Header Content
Image Class:
IMG.header {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 0;

}

I’m hoping for an end-user friendly solution 🙂

[Tom]

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

[Maarten Maakt]

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

[Tom]

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 🙂

[Maarten Maakt]

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..

[bdbrown]

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?

[Maarten Maakt]

Hi bdbrown,

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

Kind regards,

Maarten

[bdbrown]

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

[Author]

Posts