Changing the background color of drop-down navigation on Ready template

Site URL: https://nomadmassage.squarespace.com

1. How can I change the background color of the drop-down navigation on the "Ready" template?
2. How can I increase the navigation item spacing inside the drop-down navigation?

I can answer the first question right now, have to research the second one for some code

/* Change the navigation drop-downs

 colour */

 #topNav nav .folder-collection ul

li a {
   background-color:#F4F4F4;
 }

Create your own color here: https://www.hexcolortool.com/#000000 use the number in the left box with the #.....

You should be able to adjust space between links wih site styles, just be aware that this will adjust any drop down at the same time, like a category drop down, to target just your drop down menu on the nav bar will require code that I have not found yet. 

https://support.squarespace.com/hc/en-us/articles/205816038-Styling-navigation

Your site is private. Can you setup password & share url?

@tuanphan Sure thing. Here it is:

URL: https://nomadmassage.squarespace.com

PW: t6nQ=9Ln

6 minutes ago, djm said:

@tuanphan Sure thing. Here it is:

URL: https://nomadmassage.squarespace.com

PW: t6nQ=9Ln

Add to Home > Design > Custom CSS

.subnav {
    background: red !important;
}
.subnav div {
    padding-bottom: 20px !important;
}

Hi @derricksrandomviews

Thanks for this.

1. Unfortunately the code is not working for me. This is what I inserted into Custom CSS:

#topNav nav .folder-collection ul
li a {
   background-color: #E3EDEA;
 }

Is there something I’m missing?

2. I had tried this before, too. But the site style can only change the main navigation item spacing, not the spacing of the items inside the drop-down.

4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

.subnav {
    background: red !important;
}
.subnav div {
    padding-bottom: 20px !important;
}

 

So good. This both works perfectly. Thanks @tuanphan.

Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

18 hours ago, djm said:

So good. This both works perfectly. Thanks @tuanphan.

Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

Just checked quickly. Increase width seems time-consuming.

You can use this code to solve.

.folder-toggle~.subnav div span {
    word-break: break-word;
}

13 hours ago, tuanphan said:

Just checked quickly. Increase width seems time-consuming.

You can use this code to solve.

.folder-toggle~.subnav div span {
    word-break: break-word;
}

Thanks. This works. But it breaks at really bad points. The words are in German. Any way around this?

11 hours ago, djm said:

Thanks. This works. But it breaks at really bad points. The words are in German. Any way around this?

Add this CSS

@media screen and (min-width:901px) {
.nav-open .sidetray-wrapper {
    min-width: 900px;
}
}

This is a nice workaraound, instead of using hyphens. I adapted the wrapper width to my liking. Great stuff.

Thanks so much.