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
  • Views 854
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.