Setting max-width for primary nav items

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 */

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?

oh! Typo-- so sorry @bangank36! I had an awful fright for  a second there!

https://www.queticocoaching.com/

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.
 

also tested

word-break: break-all;

as a radical snippet to see if i could force the words to break and it didn't work 

 

@bangank36 I was wondering if you could take a look again? I am sorry that I had a typo in my url. 

It is 
https://www.queticocoaching.com/

I wish to control the width of the individual navigation items so the longer ones will wrap to multiple lines rather than being really long on one line. 

Thank you... 

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

My testing

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

I appreciate your help. 

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. 

It 's good to know that bro