Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
todd-y

Adding Dividers to Drop-Down Menu with CSS

Question

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!

w separator.PNG

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1
.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.


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
  • 1

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

 


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
Posted (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?

image.png.5bb31ab9bc8e5a3dc5adad676963dc55.png

Edited by todd-y

Share this post


Link to post
  • 0
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!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...