twinklingshallots

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

I appreciate your help. 

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

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 

 

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.
 

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

https://www.queticocoaching.com/

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