Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Expansive navigation spacing


SonderUX

Question

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

Hello.

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
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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 {
    width:80%;
}

.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

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