Jump to content

Adjusting spacing in 7.1 drop down nav

Recommended Posts

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 

nav.jpg

Link to comment
  • 6 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, Tove said:

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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?

Link to comment

remove above & use this

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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 

766E911A-B986-4D05-83F8-245394C2256A.png

Link to comment
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 

766E911A-B986-4D05-83F8-245394C2256A.png

#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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.