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

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


jbelsky

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

 

 

Link to comment

Recommended Posts

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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

Edited by RushofitAll
self-answered part of my question
Link to comment
  • 0
Posted (edited)
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.

1571984183_Screenshot2021-07-08at19_10_18.thumb.png.7f30ffac2232dd51c02f1aa4a1a3618c.png

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

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
25 minutes ago, paul2009 said:

1571984183_Screenshot2021-07-08at19_10_18.thumb.png.7f30ffac2232dd51c02f1aa4a1a3618c.png

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!

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