Adjusting spacing in 7.1 drop down nav

Site URL: https://wolf-cube-3k56.squarespace.com

Can anyone recommend CSS to add so I can spread out the items in my drop-down nav?  I've already added CSS for line height, but I don't know the tag for the space between the line items. I have links that are two lines long, and I need additional space so there's more separation. 

Also, is there a way to add padding to the bottom of the container box?

Thanks 

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; 
}

On 12/3/2020 at 10:55 AM, tuanphan said:

remove above & use this

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

 

Hi tuanphan do you know how to centre the buttons on image blocks on my homepage 

and also how to make a summary block able to swipe on mobile view 

url : https://www.myrecoveryuk.co.uk 

9 hours ago, jakelyd said:

Hi tuanphan do you know how to centre the buttons on image blocks on my homepage 

and also how to make a summary block able to swipe on mobile view 

url : https://www.myrecoveryuk.co.uk 

#1. Add to Design > Custom CSS

/* center image button on mobile */
@media screen and (max-width:767px) {
.image-button-inner {
    text-align: center;
}
}

#2. No idea, you try creating a new topic

2 hours ago, tuanphan said:

#1. Add to Design > Custom CSS

/* center image button on mobile */
@media screen and (max-width:767px) {
.image-button-inner {
    text-align: center;
}
}

#2. No idea, you try creating a new topic

genius !! worked perfectly again, also if I want to try learn coding / custom CSS where would you recommend I start.

On 1/8/2022 at 5:43 PM, jakelyd said:

genius !! worked perfectly again, also if I want to try learn coding / custom CSS where would you recommend I start.

Try teamtreehouse (learn HTML then CSS)

or this CSS course for Squarespace by WillMyers