Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

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

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

Hi @jbelsky 

It may be better to think about your issue in terms of what you can't do, rather than the specific symptom. From what I can see, you have very long navigation items and so you want them to take up less horizontal space. Your previous workaround was to add line breaks so that you could force nav items to be split into two or more rows, thus getting around the issue. When Squarespace closed this loophole, your solution no longer worked. 

If I understand your issue correctly, you therefore need a new workaround that will limit the width of the nav items. One way to do this would be to define the maximum width of every nav item. If a nav item is smaller than the maximum width, the property will have no effect, but if wider, the overflow will wrap on to a new line (or lines).

For example, if you add this to Design > Custom CSS it will transform the page as shown below:

.layout-style-center #topNav nav li a {
  max-width: 96px;
}

New:

nav-max-width.thumb.png.49b3c9afd6fd07ab454deea0e19e95cf.png

 

Original:

1226622455_nav-nolimit.thumb.png.a211952905a836d18e7a479e7d95b2c0.png

Let me know how you get on.

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

@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!

Screen Shot 2020-02-04 at 9.04.41 AM.png

Screen Shot 2020-02-04 at 9.09.39 AM.png

Link to comment

Hi @concentric 

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

 

spacer.png

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;
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 6 months later...

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

Screen Shot 2020-08-26 at 5.13.16 pm.png

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.

 

pharmacall-nav-example.thumb.png.5351004ff9862c8a3b84454b9a1dbfc7.png

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 4 months later...
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?

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.

1248033152_Screenshot2021-01-14at18_17_01.thumb.png.65f8741a270731c842993d812cad80ca.png

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:

980781605_Screenshot2021-01-14at18_11_00.png.a120a29cb9b97921bd5bcbe573a09891.png

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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?

217790157_Screenshot2021-03-18at22_10_59.thumb.png.3040551ffb2eca773ef360ac0d1e9461.png

 

370382297_Screenshot2021-03-18at22_11_15.thumb.png.0192626af54cfc1892f412af3c536d56.png

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

What do you want it to look like?

217790157_Screenshot2021-03-18at22_10_59.thumb.png.3040551ffb2eca773ef360ac0d1e9461.png

 

370382297_Screenshot2021-03-18at22_11_15.thumb.png.0192626af54cfc1892f412af3c536d56.png

 

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

Link to comment
  • 2 weeks later...

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

Link to comment
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?

781824085_Screenshot2021-04-06at18_47_33.thumb.png.6d0d0ea57259c83c8d1ce9fe32938099.png

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.