I need a new method for adding line breaks to navigation titles

Thank you so much @paul2009 this is exactly what i wanted! is there a way to make the text in the second line a smaller font size?

2 hours ago, Katywelsh said:

Is there a way to make the text in the second line a smaller font size?

Yes, you can change the 'font-size' with some CSS.

As it's really just one line that has 'wrapped' onto two, the style cannot be applied to the second line specifically, but you can apply it to top navigation items 4, 5, 6 and 7 using this:

#topNav {
  li:nth-of-type(4) a, li:nth-of-type(5) a, li:nth-of-type(6) a, li:nth-of-type(7) a {
    font-size: 11px;
  }
}

Adjust the size to meet your needs 🙂

  If this helps you, please click "Like" below  ⬇️

Amazing! thank you so much @paul2009 thats perfect!

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?

@paul2009 Might you know how to do this to this Brine site?  I tried the previously mentioned CSS and it wasn't effective.  

https://zaleski-yoga-therapy-trial.squarespace.com/

pw: essential

I would like it so that if there are more than one word in the navigation, they would wrap centered.

Thank you!

17 minutes ago, oldegray said:

Might you know how to do this to this Brine site? I would like it so that if there are more than one word in the navigation, they would wrap centered.

For your site, try adding this to Design > Custom CSS:

.Header-nav-item {
  max-width: 120px;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
}

I recommend that you also go into the Site Styles panel (Design > Site Styles) and set your Mobile Breakpoint to 980px (the default is 640px). This will ensure the mobile navigation kicks in before the desktop navigation becomes squashed.

Let me know how you get on.

If this helps, please click "Like" below  ⬇️

25 minutes ago, paul2009 said:

For your site, try adding this to Design > Custom CSS:

.Header-nav-item {
  max-width: 120px;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
}

I recommend that you also go into the Site Styles panel (Design > Site Styles) and set your Mobile Breakpoint to 980px (the default is 640px). This will ensure the mobile navigation kicks in before the desktop navigation becomes squashed.

Let me know how you get on.

If this helps, please click "Like" below  ⬇️

This worked wonderfully.  Thank you!

Hi @paul2009 ,

I came across this old thread by the title. What I'm looking for is a bit different: would it be possible to use custom CSS to create navigation sub-menus the way that Alpha-Sense does: https://www.alpha-sense.com/

Specifically, to break sub-menus to columns (found a simple solution for that elsewhere), but also add text underneath individual menu items (see their Platform menu)? Also, as a bonus, potentially adding such an extra image/text/CTA section ("ad") within the submenu? Or column divider line like under Solutions?

Cheers,

Jimmy

11 minutes ago, JimmyT said:

would it be possible to use custom CSS to create navigation sub-menus the way that Alpha-Sense does

The example you've quoted is a WordPress site with what I'd describe as "mega menus".

Squarespace doesn't have a built-in "megamenu" solution but there are a number of third-party solutions available.

Did this help? Please give feedback by clicking an icon below  ⬇️

5 minutes ago, paul2009 said:

Squarespace doesn't have a built-in "megamenu" solution but there are a number of third-party solutions available.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks a bunch, I'll check out these!

Hi Paul,

You seem to be helping everyone - which is great. The only problem is none of this CSS is having any change on my website. https://cheetah-accordion-dj3t.squarespace.com is the domain and pw is opaleye. let me know if you can help. I would really appreciate it. I've been trying to tweak it for hours.