Jump to content

Stop Stacking in Header with Multiple Navigation Links

Recommended Posts

Site URL: https://crow-hexahedron-6lrs.squarespace.com/config/

Hey everyone,

I am having a hard time keeping my header neat and tidy as I add more navigation links although I would really like to add a few more without them stacking as demonstrated in my attachment.

Preferably, I would like all navigation links in one evenly spaced line in-between my 'booking' button and the logo/title on the left which I would really like to keep.

If I have to lose 1 or 2 links because there is literally not enough space in-between the logo and button then I would be happy to do so and move them to the footer but my other attachment demonstrates that there isn't enough space to pull that off either.

Is there a code that would allow all my navigation links to sit nice and spaced out across the header in-between my logo and button?  Or is there another workaround I am not seeing?

I have tried extensively changing the width and spacing values in the editor but can't find a solution.  

I am focussing on desktop at the moment and will tackle mobile at a later date!

I would really appreciate anyones help on the matter.

Thanks!

Screen Shot 2020-10-28 at 11.31.24.png

Screen Shot 2020-10-28 at 11.33.53.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Your site is private therefore I cant check it directly, so I place another post with similar nav bar issue, feel free to check it out

Remove padding from navigation - Coding and Customization - Squarespace Forum

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
16 minutes ago, bangank36 said:

Your site is private therefore I cant check it directly, so I place another post with similar nav bar issue, feel free to check it out

Remove padding from navigation - Coding and Customization - Squarespace Forum

I tried the following code in Design - custom css

.header-layout-branding-center-nav-center .header-nav {
    width: 100vw;
    position: absolute;
    bottom: -50px;1058491687_ScreenShot2020-10-28at13_13_54.thumb.png.9b344d6bad3d6db810ab175ff154947b.png
}

And all the others from the forum link you posted but nothing appears to be working?

With all the coding you posted on the other thread you referred to above, none of them made any change to my stacking issue.

Sorry for the bad news 😞 do you have another workaround?

Cheers

 

Link to comment

Because they are site-specific code, seems like you should give your site public with temp password so I can check 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.