Adjusting spacing in 7.1 drop down nav

I found the answer in another post. 

.header-nav-folder-item {
      padding-bottom: 8px;

}

Of course, it came from Tuanphan!

On 10/14/2020 at 7:34 PM, Tove said:

I found where! but need help to make my drop down nav broader?

 

If you share site url, we can check easier.

11 hours ago, tuanphan said:

If you share site url, we can check easier.

https://bluebird-earthworm-6yej.squarespace.com/config/pages

Yes!

Just now, Tove said:

I need a bit more space in the menu, a bit larger.

2 hours ago, Tove said:

https://bluebird-earthworm-6yej.squarespace.com/config/pages

Yes!

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    padding-bottom: 20px;
}

9 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    padding-bottom: 20px;
}

 

Thanks but I need it to be broader so the longer Titles fit in the drop down nav.?

4 hours ago, Tove said:

Thanks but I need it to be broader so the longer Titles fit in the drop down nav.?

.header-nav-folder-item {
    width: auto !important;
    white-space: nowrap;
}

Awesome!Thank you soo much! I would really like to learn this more 😉 

One last question! Is there any way I can get the titles alined on the left side of the drop down menu now?

/* align left dropdown items */
.header-nav-folder-content {
    text-align: left !important;
}

Hi @tuanphan, 

I am using this code:

.header-nav .header-nav-item--folder .header-nav-folder-content {width: 400% !important; 
  white-space: nowrap !important; 
}

currently on my site - https://sapphire-snail-bcjw.squarespace.com/foxlea-manor-buckinghamshire password: silverstein

However I have two folders and the second one doesn't need to be 400% wide. I would like both folders to be the width that they need to be to have each page on one line. Setting the 400% to 'auto' didn't work. 

Any suggestions?

remove above & use this

a.header-nav-folder-title[href="/locations"] + .header-nav-folder-content {width: 400% !important; 
  white-space: nowrap !important; 
}