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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.