Jump to content

Split Navigation overlapping on different browsers than Chrome

Recommended Posts

Hi! I've got a problem with split navigation on my site. I've added CSS to split it into the half with logo in the middle. I also adjusted the screen width so it doesn't overlap when the window is minimized.  It looks and works just as I wanted on Chrome but it is doing weird things in Firefox and Safari. How do I make sure it will look good in every browser? Screenshots with descriptions are attached below.

Code: 
@media screen and (min-width: 1100px){ 
.header-nav {
    position: absolute;
    top: 53px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 50px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 400px!important;
}
  
  
.header-title-logo a {
    z-index: 1000;
    position: relative;
  }
}

Zrzut ekranu 2022-07-1 o 17.50.03.png

Zrzut ekranu 2022-07-1 o 17.49.50.png

Zrzut ekranu 2022-07-1 o 17.57.09.png

Link to comment
  • Replies 8
  • Views 393
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
15 hours ago, dlv118 said:

Hi @tuanphan - I posted about this same issue on another account I can no longer access. Can you help me find a way to separate the navigation with even spacing on both sides of the logo (right now is heavier on right side)

site is https://halibut-daffodil-g429.squarespace.com/ and password is 12345

image.png

Move left nav to left?

or

move right nav to left a bit?

 

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
On 9/25/2022 at 3:47 AM, dlv118 said:

Move the right nav to the left (but not move the left nav)

Find this code in Custom CSS & adjust number 150

.header-nav .header-nav-item:nth-of-type(4) {
    margin-left: 150px !important;
}

 

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

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.