Jump to content

Site Logo Nav Gap on Safari but not Chrome?

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://DelawareRising.club

Hello!
So with coding I moved the "Site Title", which is the logo for my website to the left of the navigation bar. On Chrome the links in the navigation don't have a gap where the Site Title originally was, but on Safari there is a noticeable gap in the middle of the navigation. Is there some code that I can use to stop this from happening on Safari browsers?

Thanks

Link to comment
  • Solution

I'm seeing the gap on both Chrome and Safari. My guess is that is because SS is detecting the width of the logo and then putting a margin on the two items at the center of the navigation to create a hole for the logo.

To fix add the following to Design > Custom CSS.

#mainNavigation > div[style] {

  margin : unset !important;
  
  }

This is for v7.0 using the Pacific template family.

Let us know how it goes.

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
2 hours ago, creedon said:

I'm seeing the gap on both Chrome and Safari. My guess is that is because SS is detecting the width of the logo and then putting a margin on the two items at the center of the navigation to create a hole for the logo.

To fix add the following to Design > Custom CSS.

#mainNavigation > div[style] {

  margin : unset !important;
  
  }

This is for v7.0 using the Pacific template family.

Let us know how it goes.

That did the trick! Thanks so much 🙂

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.