Jump to content

Overlapping Logo on Site Header

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

18 minutes ago, mtengaio said:

Is there a way to have a logo extend beyond the bottom of a site header? See attached. 

Overlap header sample.png

It is possible with some CSS code to position your logo. 

Some thing like this on my testing page

image.thumb.png.0326c741eb43f432d421e767546211ae.png

If you want to apply it, share your site with the protected password to have a look at it together

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You can use the below CSS to achieve this look on 7.1 sites. Note that this will only affect desktop. The logo will be normal on mobile. 

.header-announcement-bar-wrapper,.header-inner,.header-display-desktop {
  position: unset;
}
.header-nav {
  position: relative;
}
.header-display-desktop .header-title-logo {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}

Link to comment
On 10/28/2021 at 1:01 AM, mtengaio said:

Thanks bangank36, but is there a way to show me without permissions? I am only a contributor to this particular site. What if I set up a trial site?

If you have admin permission, you can duplicate the site & share url

If you don't have admin permission, you can create a new trial (free), setup header same as main site, then share site url, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/27/2021 at 1:54 PM, Chris.SE said:

You can use the below CSS to achieve this look on 7.1 sites. Note that this will only affect desktop. The logo will be normal on mobile. 

.header-announcement-bar-wrapper,.header-inner,.header-display-desktop {
  position: unset;
}
.header-nav {
  position: relative;
}
.header-display-desktop .header-title-logo {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}

Thanks Chris.SE. I tried this but it didn't quite work for me. The logo did resize and overlay the header border but it flashes once very quickly, then disappears.

Link to comment
On 11/1/2021 at 11:31 PM, mtengaio said:

I set up a trial site: https://harmonica-blueberry-hml5.squarespace.com/config/pages Please take a look.

Hi,

What is access password?

accesspasssword.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/4/2021 at 7:55 PM, mtengaio said:

tuanphan,

Sorry, it's Lazybones208

Lazybones208

https://harmonica-blueberry-hml5.squarespace.com/?noredirect

Add to Design > Custom CSS

.header-title-logo a {
    position: absolute;
    bottom: -60px;
    z-index: 9999;
}

image.thumb.png.6e1dea79b64d41a5b7191468b367bddc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/6/2021 at 8:29 PM, tuanphan said:

Lazybones208

https://harmonica-blueberry-hml5.squarespace.com/?noredirect

Add to Design > Custom CSS

.header-title-logo a {
    position: absolute;
    bottom: -60px;
    z-index: 9999;
}

image.thumb.png.6e1dea79b64d41a5b7191468b367bddc.png

Thank you tuanphan. This worked on the test site just fine. However when tried it on the actual site I'm building, things didn't work so well. I'm in edit mode and import the logo in to the header (with the custom css in place), everything appears fine, but when I save, the screen refreshes and the logo disappears. Any idea why?

Link to comment
On 11/8/2021 at 9:41 PM, mtengaio said:

Thank you tuanphan. This worked on the test site just fine. However when tried it on the actual site I'm building, things didn't work so well. I'm in edit mode and import the logo in to the header (with the custom css in place), everything appears fine, but when I save, the screen refreshes and the logo disappears. Any idea why?

Can you share link to main site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.