[Resolved] How to overlay site title over logo

Home Forums Support [Resolved] How to overlay site title over logo

Home Forums Support How to overlay site title over logo

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1627046
    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;
    }
    #1627061
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1627063
    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. πŸ™‚

    #1627066
    Leo
    Staff
    Customer Support

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

    #1627157
    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!

    #1628150
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.