Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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;
}

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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! 🙂 

Link to comment
  • Solution
On 12/4/2022 at 2:21 PM, Sophie_Wuthrich said:

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/4/2022 at 2:21 PM, Sophie_Wuthrich said:

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! 🙂 

Add to Design > Custom CSS

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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.