7.1 - Increase Vertical Padding in Dropdown Menu

Hi,

I'm in Version 7.1 and I want to increase the vertical spacing/padding between items in the drop down menu. So in the attached image, more vertical space between "Doodle Line Art" and "Lino Print Stars" etc.

Also, I might want to change the font highlight colour when a submenu item is clicked on/selected, so if anyone has any code for that, it would be appreciated.

Thanks

Can you share link to your site?

Hi - here it is > https://itsjensworld.com

Thanks!

Hey guys. I know this is an old thread but hopefully someone can help.

I've tried adding this code to create more vertical space between page titles in the drop down nav, but nothing changes.

.header-nav-folder-item a {
    padding-top: 10px !important;
}

https://www.makingwavescreative.com/

Any help welcome! Thank you.

7 hours ago, MakingWaves said:

Hey guys. I know this is an old thread but hopefully someone can help.

I've tried adding this code to create more vertical space between page titles in the drop down nav, but nothing changes.

.header-nav-folder-item a {
    padding-top: 10px !important;
}

https://www.makingwavescreative.com/

Any help welcome! Thank you.

a.Header-nav-folder-item {
    padding-top: 10px;
}

@tuanphan you are half the reason I use Squarespace. I love you.

I have 7.0 and would like to increase the space also.   Would this custom code work for the spacing.   I don't need the color, I just need more spacing.  

https://www.impromptuphotography.com/

15 hours ago, Cindy1570048209 said:

I have 7.0 and would like to increase the space also.   Would this custom code work for the spacing.   I don't need the color, I just need more spacing.  

https://www.impromptuphotography.com/

Can you turn off "right click disable"? We can check code easier

I am going to sound stupid right now and have to say,  I truly don't remember how I did it (turned it on or off).   I just know I need it (personally that is).   I know it doesn't provide total protections, but it does deter. 

It is very time consuming to check the code of a website without right clicking, you will need to scan each code on the website to find the correct code position and then start the check.

You can try remove all code in COde Injection Header/Footer

Hi @tuanphan!

I'm trying to add more vertical spacing between my items in a dropdown menu and plugged in the code you mention about into the CSS, but it's not working. Any other advice? My site is: nancykononelos.com.

Thanks!!

.header-nav-folder-item a {
    padding-top: 10px !important;
}

On 2/18/2020 at 2:42 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-item a {
    padding-top: 10px !important;
}
.header-nav-folder-item--active a {
    color: red !important;
}

 

This works great!!! ONE question: I notice that the space (pixels) between the items in the drop down, for about 1-2 seconds are in their original, "too close together" space, and then POP farther apart to the actually pixels I set (in my case, 20 px). So I'm guessing the sub-menu items are about 5 pixels for 1-2 second and "jump" to 20. It tends to then stay at the 20 px until you go to another page, hover over the menu item, and it starts all over again. Is there a line of code to tweak this so the sub-menu/drop down space between links stays in place (ie, at 20 px)? Thank you! 🙂

On 11/28/2020 at 9:08 PM, harlowbogie said:

Hi @tuanphan!

I'm trying to add more vertical spacing between my items in a dropdown menu and plugged in the code you mention about into the CSS, but it's not working. Any other advice? My site is: nancykononelos.com.

Thanks!!

.header-nav-folder-item a {
    padding-top: 10px !important;
}

Add to Custom CSS

.subnav li {
    margin-bottom: 20px !important;
}

On 11/30/2020 at 1:52 PM, TonyBabarino said:

This works great!!! ONE question: I notice that the space (pixels) between the items in the drop down, for about 1-2 seconds are in their original, "too close together" space, and then POP farther apart to the actually pixels I set (in my case, 20 px). So I'm guessing the sub-menu items are about 5 pixels for 1-2 second and "jump" to 20. It tends to then stay at the 20 px until you go to another page, hover over the menu item, and it starts all over again. Is there a line of code to tweak this so the sub-menu/drop down space between links stays in place (ie, at 20 px)? Thank you! 🙂

Can you share site url?

Thanks!

Hi @tuanphan,

I know this is an old thread, but I've been using this code on my website and it works just fine! I did have a question regarding the very top word on my drop down menu. Is it possible for one word to have more space than other words? For example, I'd like the top word on my drop down menu to be 20 pixels higher than the words below it. Then the words below it would be 10 pixels apart from each other. 

Also, I was wondering if it possible for the words in my drop down menu to highlight when I hover my mouse over it. If I could get help on this it would be highly appreciated! My website is tylerjamesdesigns.com.

7 hours ago, Tyler-c said:

Hi @tuanphan,

I know this is an old thread, but I've been using this code on my website and it works just fine! I did have a question regarding the very top word on my drop down menu. Is it possible for one word to have more space than other words? For example, I'd like the top word on my drop down menu to be 20 pixels higher than the words below it. Then the words below it would be 10 pixels apart from each other. 

Also, I was wondering if it possible for the words in my drop down menu to highlight when I hover my mouse over it. If I could get help on this it would be highly appreciated! My website is tylerjamesdesigns.com.

Your site is private. Can you setup an access password?

Hi! I'm also looking for more spacing in between each line on the drop down menu.

Site: LDG - 2 (squarespace.com)

pass: laguardia

On 7/19/2023 at 9:48 PM, KG_LDG said:

Hi! I'm also looking for more spacing in between each line on the drop down menu.

Site: LDG - 2 (squarespace.com)

pass: laguardia

Add to Design > Custom CSS

/* Mobile nav space */
div.container.header-menu-nav-item {
    margin-bottom: 40px;
}

I am looking to increase the verticle spacing between the subnav on my site (on desktop viewing), can you please advise on the code? The codes above did not work for me

goodacretherapy.com

On 7/27/2023 at 10:42 AM, alysemichelle said:

I am looking to increase the verticle spacing between the subnav on my site (on desktop viewing), can you please advise on the code? The codes above did not work for me

goodacretherapy.com

I don't see sub nav on desktop. Can you take a screenshot?

This code works for me in the new Fluid - 2023 gen

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    line-height: 2;
}

On 7/21/2023 at 8:15 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile nav space */
div.container.header-menu-nav-item {
    margin-bottom: 40px;
}

 

Not for mobile site - for the desktop 

On 8/7/2023 at 10:57 PM, KG_LDG said:

Not for mobile site - for the desktop 

Use this CSS code

/* Dropdown items space */
.header-nav-folder-item {
    margin-bottom: 40px;
}