Clicking logo no longer links to home page after adding CSS code to create split navigation

Hoping someone is able to guide me with my issue. I used the following CSS code to create a split navigation so that my logo is centred and my navigation links are on either side. Since implementing this code though my logo no longer links to the homepage. I'd greatly appreciate some guidance if possible! ☺️

Thanks in advance! 

/* Split Navigation */
.header-display-desktop .header-title {
  height: 7vw !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
}
.header-display-desktop .header-nav {
  position: absolute;
  top: 0;
  margin-top: 0 !important;
  height: 7vw !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
}

.header-display-desktop .header-nav-item:nth-of-type(2) {
  margin-right: 40vw !important;
}

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thank you, the details are below:

Website: https://florence-design.squarespace.com/

Password: Florence

Manipulating the elements as you have, the logo pointer events are being masked by another element. Fiddling with the z-index probably won't do you any good as either your logo will be masked or the nav links will be.

The fundamental issue here is that you need a truly split nav and SS v7.1 doesn't do that. You can make it look split as you've done but CSS can not change the underlying structure of the HTML which would get rid of the overlay issue.

I don't have a solution but the only way I can see it might be done would be to restructure the HTML with JavaScript. I don't see that being easy or robust.

Thank you for taking the time to explain the fundamental issue, I appreciate it! 🙂

If someone sees something I don't please do chime in!

I was going to take a peek but I think the site is no longer accessible by pwd?

Sorry I changed it back to private - it should be accessible again now though! 🙂

On 12/2/2022 at 9:07 AM, Sophie_Wuthrich said:

Sorry I changed it back to private - it should be accessible again now though! 🙂

Did you solve or still need help? There is a same question on Circle Forum 4-5 days ago and I provided an answer there.

1 hour ago, tuanphan said:

Did you solve or still need help? There is a same question on Circle Forum 4-5 days ago and I provided an answer there.

Hi tuanphan! I wasn't able to resolve the issue unfortunately, but would be keen to know your answer. I had a look on previous threads before posting but must've missed the other post. Thank you in advanced! 🙂 

On 12/9/2022 at 11:48 PM, tuanphan said:

 

Add to Design > Custom CSS

/* Make logo clickable */
.header-display-desktop .header-title {
    z-index: 999999999;
}

 

Thank you so much, this is just what I needed! ☺️