Jump to content

Expansive navigation spacing

Recommended Posts

Site URL: https://www.freshcoastjazz.com/


I had to reduce the link spacing of my main header links so I could set my mobile breakpoint to 1000px to mitigate the navigation from wrapping. Now the links look like they're too scrunched together with all this empty space between the links and logo when the browser is anything wider than 1200px. 

Is there any way to allow the link spacing to expand evenly as the browser width gets wider?

Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 926
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

If you add this to your custom css from the main design menu, then I think this is the effect you want.

nav.Header-nav {

.Header-nav-inner {
    display: flex;
    justify-content: space-between;
  • sets the allowable width of each side navigation to 80% (so that your nav items don't bump right up to the logo). you could change this to other percentages. 
  • changes the layout structure to flex, and justifies it to layout the space between each item evenly. This keeps the left and right extremes fully expanded to the 80% width. you could also try "space-evenly" or "space-around" for (slightly) different spacing settings, but I think this is probably the one you want. see here for documentation on this property: CSS justify-content property (w3schools.com)


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.