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

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.




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.

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

One clue: if I change the code from -100px to -30px, the links suddenly work, but then the logo is floating out of position.

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


 

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.

Hi there. Yeah, it's in development.

Password:
SSStagPassword
https://oleander-pomegranate-ka8f.squarespace.com/?p&p

Does that do the trick?

Michael

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.
 

39 minutes ago, MichaelG_2001 said:

Does that do the trick?

No. The site password has not been set.

NM, I think I found a workaround. Thanks for your time, tho.

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