CSS Overlapping Logo

Squarespace boasts a variety of tools to help designers construct beautiful webpages, but sometimes custom code (Squarespace CSS and HTML) is needed to make a webpage truly unique.

In this blog article, I will give you the code you need to create a logo that escapes the confines of its masthead.

This code is very useful if your business has a very tall logo, which is adversely effecting the masthead’s height. You can ensure the overall masthead has a low footprint, freeing up prime retail space for your tier 1 content.

Here is the end-result:

Screen capture from https://www.darwingray.com/

And here is the code:

You can tailor the “margin-left” and “margin-top” to fit your design, as well as the “border” styles.

I hope you found this useful!

Will :)