Posted
·
Edited by RushofitAll self-answered part of my question
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.
I need a new method for adding line breaks to navigation titles
in Customize with code
Posted · Edited by RushofitAll
self-answered part of my question
@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?