Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jbelsky

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

Question

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

 

 

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

As a community, we love to help fellow Squarespace users improve their websites but it's not always easy for us to understand what isn't working. To help, we need to see the issue first hand, which means we need you to provide a working link to your website. If the site isn't live, please also set a password in the visibility settings and tell us what it is.

If the issue isn't immediately obvious, please also provide a detailed explanation of what visitors need to be able to do, or what the site should look like. A mockup or annotated screenshot can help us too.

 

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...