Jump to content

Setting max-width for primary nav items

Recommended Posts

Site URL: http://www.quetiicocoaching.com

The navigation names on this site are really long and the site owner wants two of them even longer. 

I wish to set a max-width for the primary navigation items so  the names wrap to multiple lines. 

For example, one navigation item is "TRAUMA IN SCHOOLS" 

I want it to be stacked:

TRAUMA IN
SCHOOLS

I tried this, and it doesn't work. 

Any ideas anyone?

/* stacking nav items on multiple lines */

.Header-nav--primary .Header-nav-item  {

vertical-align: top;
 text-align: left;
max-width:96px;
}

/* end STACKING individual nav items */

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, twinklingshallots said:

Site URL: http://www.quetiicocoaching.com

The navigation names on this site are really long and the site owner wants two of them even longer. 

I wish to set a max-width for the primary navigation items so  the names wrap to multiple lines. 

For example, one navigation item is "TRAUMA IN SCHOOLS" 

I want it to be stacked:

TRAUMA IN
SCHOOLS

I tried this, and it doesn't work. 

Any ideas anyone?

/* stacking nav items on multiple lines */

.Header-nav--primary .Header-nav-item  {

vertical-align: top;
 text-align: left;
max-width:96px;
}

/* end STACKING individual nav items */

I can not access your site. Can you check it again?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I thought setting a max-width for the individual nav item class would work. 
I am not sure if it's just not working or if the text labels for the 2 blogs (Trauma... and Getting Unstuck) have something wrong with them. Those 2 are crashing and overlapping. I've attached a grab.
 

.Header-nav-item {
    display: inline-block;
    vertical-align: top;
    max-width: 96px;
}
 
Also tried without display:inline-block;
 
.Header-nav-item {
    vertical-align: top;
    max-width: 96px;
}

Screen Shot 2022-10-19 at 08.13.59.png

Edited by twinklingshallots
Link to comment

Try adding to Home > Design > Custom Css

.Header-nav-item[href*="trauma-in-schools"] {
  white-space: normal;
  max-width: 90px;
  text-align: center;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.a1b228540c8a2191d294e410f86cb91a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 minutes ago, twinklingshallots said:

Thank you @bangank36!! You are amazing-- I was getting discouraged and could not figure it out. 🙏 

I appreciate your help. 

image.png.a0934a0ae5165ff0bbda35663436ffd7.png

It 's good to know that bro

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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...

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.