todd-y 1 Posted June 25 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! Share this post Link to post
1 RyanDejaegher 98 Posted June 25 @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; } 1 todd-y reacted to this Philadelphia, PA Available for hire Beyond Copy/Paste: Learn CSS for Squarespace Workshop Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Share this post Link to post
0 todd-y 1 Posted June 25 (edited) 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? Edited June 25 by todd-y Share this post Link to post
1 rwp 238 Posted June 25 .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. 1 todd-y reacted to this Free Squarespace 7.1 Anchor Link and Accordion Plugins available here! If I replied to one of your questions with code, it was either CSS or jQuery. To add CSS, go to Design -> Custom CSS jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace. After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery). There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced Share this post Link to post
0 todd-y 1 Posted June 25 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! 1 RyanDejaegher reacted to this Share this post Link to post
1 rwp 238 Posted June 25 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); } 1 1 rachelt and todd-y reacted to this Free Squarespace 7.1 Anchor Link and Accordion Plugins available here! If I replied to one of your questions with code, it was either CSS or jQuery. To add CSS, go to Design -> Custom CSS jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace. After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery). There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced Share this post Link to post
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!
Share this post
Link to post