Jump to content

Main nav fails when using custom CSS to have logo overlap banner (7.0)

Recommended Posts

Hi there. I'm trying to find a bulletproof way to have the logo in the site header overlap into the banner section in SS 7.0. I'm not a coder by trade, so I rely on various tutorials I can find to solve design problems. I'm currently using this bit of code to move the logo into the correct place:

.Header-inner div[data-nc-container="bottom-left"] {
  position: relative;
  top: -100px;
}

The logo is positioned Bottom Left, while the main nav is placed Upper Right in order to keep it in the whiteground bar. It works perfectly until I add in two social links I need next to the nav in the Upper Right. At that point, the main nav ceases to work.

503832_ScreenShot2020-10-23at12_44_52PM.thumb.png.972e5f5ad2d19a6244820e4f4df23c26.png


If I move the social links at Bottom Right, the nav actually works but the social icons are in a random place over the image and not where they need to be.


652728475_ScreenShot2020-10-23at12_47_47PM.thumb.png.fe43b5ef9b1c24ef3c8cf7f8948c7855.png

Not sure if this is related, but the Social Icons themselves have gone haywire too. The actual logos of the social sites (Insta & FB) are not visible, though the shapes that carry them are.

Any advice is greatly, greatly appreciated.

Thanks!
Michael

Link to comment
  • Replies 7
  • Views 511
  • Created
  • Last Reply

When you post a question, it will really helps us if you include a working link to the page. If your site isn't live yet, bear in mind that we will only be able to view it if you set a site password and tell us what it is.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Currently working around the problem by frankensteining in a different bit of code I found, so it looks like this:

.Header-inner div[data-nc-container="top-left"] {
  position: relative;
  top: -30px;
}

.Header-branding-logo {
  margin-bottom: -150px;
  position: relative;
  z-index: 5000;
}


The problem with the logos of the social icons remains.
 

Link to comment
39 minutes ago, MichaelG_2001 said:

Does that do the trick?

No. The site password has not been set.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

This code (along with some adjustment of Minimum Height for the banner) solved the problem.

.Header-inner div[data-nc-container="top-left"] {
  position: relative;
  top: -30px;
}

.Header-branding-logo {
  margin-bottom: -150px;
  position: relative;
  z-index: 5000;
}

I fixed the social icon problem by stripping the coding out, saving it, and then dumping it back in. Hope that will take care of it.

m
 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.