[Resolved] How to overlay site title over logo

[hastibe]

Hello! How can I overlay my site title (set in Customize > Site Identity) so that it overlays (floats over?) my logo (also set in Customize > Site Identity), like in this theme (see here and here).

To imitate the logo being stretched to full-width like in the theme linked above, I have removed logo width (i.e. the logo width field is blank in Customize > Site Identity > Logo Width) and added this CSS:

#masthead > div {
padding: 0px;
}
.site-logo,
.site-logo img {
    width: 100%;
}

This displays perfectly when the site title is hidden (via Customize > Site Identity > Hide site title), but when my site title is displayed, it pushes the logo to the side. I tried .site-branding {position: absolute;} which works to overlay the site title over the logo, but then logo no longer stretches to be full-width, and I haven’t been able to fix that, despite my efforts!

UPDATE: I think I finally figured it out! Here’s the full CSS that looks like it does the trick:

#masthead > div {
padding: 0px;
}

.site-logo,
.site-logo img, 
.site-branding-container {
    width: 100%;
}

.site-branding-container .site-logo {
margin: 0px;
}

[Leo]

Hi there,

Are you referring to this section here?
https://www.screencast.com/t/bL4PwXDpF3Hw

Can you link me to your page in question so I can see your current layout?

Let me know 🙂

[hastibe]

Yep–that’s right! I think I actually figured out the CSS I needed, though–it looks like this is doing the trick:

#masthead > div {
padding: 0px;
}

.site-logo,
.site-logo img, 
.site-branding-container {
    width: 100%;
}

.site-branding-container .site-logo {
margin: 0px;
}

The main issue was that I needed to also make .site-branding-container 100% width. 🙂

[Leo]

Instead of using CSS, couldn’t you just upload the logo in site identity, then upload a background image for the site header?

[hastibe]

Hmm, I’d have to play around with it to see if something like that could work, too–thanks for the quick responses, and I’m sure I’ll be back with other questions in the future!

[Leo]

No problem 🙂

[Author]

Posts