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