todd-y Posted June 25, 2020 Share Posted June 25, 2020 Site URL: https://forest.squarespace.com I'm looking to add a visual queue that separates items in a drop-down menu in 7.1 - would either like to add a separator element like a horizontal line - or alternate link colors. Image provided with example. Could someone help me with the CSS for this? Thank you kindly! Link to comment
RyanDejaegher Posted June 25, 2020 Share Posted June 25, 2020 @todd-y you can add this to your custom CSS .header-nav-folder-content > * + * { border-top: 1px solid rgba(0,0,0,.2); padding-top: 8px; padding-bottom: 8px; } Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
todd-y Posted June 25, 2020 Author Share Posted June 25, 2020 1 hour ago, RyanDejaegher said: @todd-y you can add this to your custom CSS .header-nav-folder-content > * + * { border-top: 1px solid rgba(0,0,0,.2); padding-top: 8px; padding-bottom: 8px; } This worked well - thank you, Ryan! It looks like the padding configuration isn't working for the first item in the folder. The line isn't respecting the 8px distance under Administration in this image. Any ideas to remediate this? Link to comment
rwp Posted June 25, 2020 Share Posted June 25, 2020 .header-nav-folder-content > * { padding-bottom: 8px; } That should add the padding. I removed the other code I posted before, I thought you were talking about the mobile menu at first. Link to comment
todd-y Posted June 25, 2020 Author Share Posted June 25, 2020 2 minutes ago, rwp said: .header-nav-folder-content > * { padding-bottom: 8px; } That should add the padding. I removed the other code I posted before, I thought you were talking about the mobile menu at first. That did it! Thank you both for your help! Link to comment
rwp Posted June 25, 2020 Share Posted June 25, 2020 Todd, this actually looks better. A little combination of both of our codes....plus a little more. You will have to remove the other code you just added. .header-nav-folder-content { padding-top: 2px !important; padding-bottom: 2px !important; } .header-nav-folder-content > * { padding-bottom: 8px; padding-top: 8px; } .header-nav-folder-content > * + * { border-top: 1px solid rgba(0,0,0,.1); } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.