RushofitAll

On 8/28/2020 at 7:00 AM, paul2009 said:

This site is using the Squarespace 7.1 platform, so you should be able to adjust the navigation by adding the following (in Design > Custom CSS😞

.header .header-nav-item a {
  max-width: 180px;
}
.header-nav-list>div {
  white-space: normal;
}
.header-nav-item, .user-accounts-text-link, .cart-text-link {
  line-height: 1.3em;
}

Notes:

• This is for Squarespace 7.1 only. My earlier posts in this thread give details for Avenue-family and Brine-family templates on Squarespace 7.0
• The maximum width of each navigation item can be adjusted on line 2. I've set it to 180-pixels initially.
• When the navigation items wrap onto two (or more) lines, the spacing between them can be adjusted using the line-height. I've set this to 1.3em.

@paul2009 - thanks for the code above - I've added it to my site, and it's getting me close to what I want ( www.rushofitall.com ), but there are a few more adjustments I'd like to make:

1) I'd like the nav items that have internally wrapped to a second line to center justify (they're right-justified now) [I self-solved this one - just added "text-align: center;"]

2) I'd like the whole nav bar to never wrap to a second line (so individual items wrap internally, but the whole line never wraps, but instead switches to the hamburger symbol when browser window is too narrow).

3) I'd like drop-down nav items (items in a navigation folder, like those under "Projects" on my site) to display full length when they show, without wrapping internally.

Any suggestions?