Jump to content

My Navigation Bar Text overlaps the logo in Safari but is perfect in Chrome

Recommended Posts

You can see in one of the images below  the text overlaps the website logo. I've tried several things I've seen online and none have resolved the issue. 

The custom code I've used to play about with the spacing is:

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: px!important;

.header-nav-item:nth-of-type(4) {
    margin-right: 300px!important;

.header-title-logo a {
    z-index: 800;
    position: relative;

I'm unsure if I need to add additional code, remove the code I've got. But every computer I've checked this with on Safari has the same issue.
(I've done the latest Mac OS update and that hasn't changed anything, as well as clearing safari cache)

Screenshot 2022-12-13 at 14.42.04.png

Screenshot 2022-12-13 at 14.41.56.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Split navigation is sadly not so easy to achieve robustly, every solution I've tried tends to run into these problems on certain screen sizes. Though I can't see exactly why Safari is constantly giving you a narrower header and causing these issues on all desktop views.

11 minutes ago, clocampbell said:

margin-left: px!important;

This line is missing a pixel value, so maybe causing a problem.

This additional CSS might help by reducing the left/right margin.

.header .header-announcement-bar-wrapper {

Let me know if that had any positive impact.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey, thank you for your suggestion!

Unfortunately amending the code to say '0' instead of 'px' and adding your additional code hasn't made a difference. 

If I remove all the code affecting the banner, there's no issues across either browser. However I'd ideally like the navigation text to be either side of the logo than below. 

Looking forward to your response, cheers.

Screenshot 2022-12-14 at 11.46.13.png

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.