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

I set up my website with product page navigation titles that had a line break in them. That way they all fit in a line and didn't wrap to a second level.  Looked good too.  Now that <.br.> code no longer works....I understand Squarespace no longer supports this strategy. 

I tried to use the custom CSS code from this website: https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles but the code injector flagged it as having an error, and I don't know enough about it to identify what that error might be.  

When I went ahead and saved it anyways, it didn't produce the desired result.  The - or # just showed up in the title. 

My website is https://jesse-belsky-stageswords.squarespace.com/in-stock, although there's nothing to see because I've removed the <.br.> code which wasn't working....  

thanks for any help, 

best, 

Jesse

I am having the exact same issue. I contacted Squarespace support and received no help.

I specifically asked what had changed in the last few days but my question was avoided.

On 12/20/2019 at 8:34 AM, Classicalbass said:

I am having the exact same issue. I contacted Squarespace support and received no help.

I specifically asked what had changed in the last few days but my question was avoided.

 

 

Try limit text with to split text to 2 lines.

@jbelsky Have you solved yet?

Having the same issue too and told that as it's custom code, they can't help and Squarespace don't have a function in built to allow this... If anyone finds a solution it'd be amazing! Feels like it should be a simple fix and solution surely?!

@paul2009, thank you so much.  That was indeed an effective alternative strategy.  I appreciate your help!

best, 

Jesse

@paul2009 do you have any suggestions for this site, on the Brine template: sunfoundation.org

I tried:

span.Header-nav-item.Header-nav-item--folder {
  max-width: 140px;
}

It worked in the site editor, but when I viewed the live site everything overlapped (see attached).

In the editor, I also couldn't figure out how to adjust the spacing between links. As the browser window narrows News drops to a new line.

Thanks for your help!

Hi @concentric 

For reference, this issue isn't caused by being logged in. It's an issue with the viewport width.

When you're logged in, the config panel takes up space on the left, reducing the width of the preview window and everything looks great. When you're logged out you have a wider preview. As the width is increased, the nav folders are prevented from wrapping and you see this issue. 

You should be able to correct it by adding the following (add it below the CSS I provided before):

.Header-nav {
    white-space: normal;
}

Hi, I'm hoping you might be able to help me with this same problem.  I'm currently building a site for someone that has too many page links and it spans almost the whole page.  If I add any more it will actually line wrap and it looks terrible. See below for what the page looks like at the moment.  (i'm on 7.1 by the way)

I tried using the code kindly provided by Paul but it did not seem to make any difference.  If anyone has any idea how I can get the items to line wrap it would make an incredible difference to the look of the site.  By the way, thank you to everyone providing assistance here it is very much appreciated.

Dan

3 hours ago, DanCantero said:

If anyone has any idea how I can get the items to line wrap it would make an incredible difference to the look of the site.

You forgot to include a working link to the site. If your site isn't live yet, please set a site password and tell us what it is, so that we can view it.

Hi Paul, apologies.  The site is rhubarb-rhino-7k49.squarespace.com   password is Pharmacall.

Thanks for you assistance.

Dan

51 minutes ago, DanCantero said:

The site is rhubarb-rhino-7k49.squarespace.com

Dan

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.

Paul, I'm actually grinning from ear to ear right now!  You have no idea how long I've been trying to do this.  Can't thank you enough.  It looks great!  Thanks again.

Hi Paul,

I tried your suggestion but for some reason it doesn't work on my website. Can you help me with that?

https://sg-multimedia.com/home

Thank you in advance,

George

1 hour ago, sgeorge said:

I tried your suggestion but for some reason it doesn't work on my website.

Hi George

I don't see the code on your site. Where have you added it?

2 hours ago, paul2009 said:

Hi George

I don't see the code on your site. Where have you added it?

 

Hi Paul,

Sorry, I removed it while trying some other things.

I have added it again so now you should be able to see it.

Thanks!

This is a long thread containing a number of questions, so for the benefit of anyone reading this, I can see that you are having difficulties with your header nav due to long links.

The CSS is not working on your site because the phrases are long and cannot 'break' onto a new line within the space allocated. If you add a space after the "/" characters, it should enable them to break more easily, like this when the CSS is applied:

Another option, which you may or may not have considered, is to add separate links for each language and then show or hide them according to the user's language. So instead of having a nav item link entitled "VIDEO PRODUCTION/VIDEO PRODUKTION" you'd have one titled "VIDEO PRODUCTION" and one titled "VIDEO PRODUKTION".  This would enable you to only show the navigation in one language at a time, reducing the space requirements. There's a guide that includes details of that here.

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

Wow. That was a really fast answer. Thank you very much! I will follow your advice.

And thank you for the link to the multi-language article. I think it is the better way to do it.

Can you share custom CSS for 7.0 Bedford family (Bryant Hill and Bedford template)? I'm trying to get line breaks for our program areas. (site is wuyee.org) Thank you!

On 3/5/2021 at 4:40 AM, wuyee said:

Can you share custom CSS for 7.0 Bedford family (Bryant Hill and Bedford template)? I'm trying to get line breaks for our program areas. (site is wuyee.org) Thank you!

 

Which item you want to add line break?

On 3/6/2021 at 10:24 PM, tuanphan said:

Which item you want to add line break?

We want to add line breaks to the main navigation bar. 

On 3/8/2021 at 10:30 PM, wuyee said:

We want to add line breaks to the main navigation bar. 

What do you want it to look like?

On 3/18/2021 at 3:12 PM, paul2009 said:

What do you want it to look like?

 

 

Yes, like this, thank you! We will actually be updating the names once we know we can line wrap the navigation. They will slightly longer than the current ones, so in case there is a max width per navigation title we want to make sure they will fit!

ABOUT

EARLY LEARNING
PROGRAMS

FAMILY & COMMUNITY
SERVICES

CHILD CARE
EDUCATOR SERVICES

GET INVOLVED

CAREERS

DONATE

Hey @paul2009this thread is just what i have been looking for, I want to make a simple CSS edit to my header (avenue theme) so that contact, about, press and shop goes to another line, effectivly creating a secondary navigation, do you think you would be able to show me how to do the code?

the site is www.katywelsh.com

20 minutes ago, Katywelsh said:

I want [it] so that contact, about, press and shop goes to another line, effectively creating a secondary navigation.

Hi Katy

Is this what you want?

If it is, you can add the following to Design > Custom CSS:

#topNav .main-nav {
  max-width: 680px !important;
}

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