Add a separator line in drop down menu

What about adding a line separator to the home page's hyperlinks? I think this may add some detail.

45 minutes ago, PathfinderJake said:

What about adding a line separator to the home page's hyperlinks?

You can add those using line blocks in the SS editor interface.

Hi @creedon,

THANK YOU! Wow. 💯🙏✨

On 7/1/2021 at 6:07 AM, jallory said:

Hi @creedon,

I would like to add lines (preferably color #6e8887) between each of my drop down menu items... I tried your initial code from above to no avail. Would you be so kind as to assist?

https://www.wiseheartpdx.org/

 

🙏

Just found some small issues. Do you need help with these?

Site URL – https://www.wiseheartpdx.org/

1. (Desktop – Footer) Reduce space at the bottom of page.

https://www.wiseheartpdx.org/

2. (All devices – Mindful compassionate dialogue) There is a big space below footer.

https://www.wiseheartpdx.org/mindful-compassionate-dialogue

3. (Mobile) Pagination is too long, do you want to replace pagination with prev/next text?

https://www.wiseheartpdx.org/classes/2021-life-serving-boundaries-competency-8

4. (Mobile – Menu) Too many menu items, menu items are uneven, not looking good.

https://www.wiseheartpdx.org/

5. (Mobile – Menu) Scroll bar at the bottom of menu.

https://www.wiseheartpdx.org/

6. (Tablet – Homepage) Increase text width?

https://www.wiseheartpdx.org/

7. (Tablet – Header) Text is cut off.

https://www.wiseheartpdx.org/

8. Still have some other issues.

On 9/17/2020 at 2:16 PM, creedon said:

Second shot!

/* desktop */

.header-nav-folder-item:nth-of-type(12) {

  border-bottom: 1px solid;
  padding-bottom: 1em;
  
  }

.header-nav-folder-item:nth-of-type(13) {

  padding-top: 1em;
  
  }

/* mobile */

.header-menu-nav-item:nth-of-type(13) a {

  display: inline-block;
  border-bottom: 1px solid;
  padding-bottom: 1em;
  
  }


.header-menu-nav-item:nth-of-type(14) a {

  padding-top: 1em;
  
  }

This CSS is very specific to your current menu layout. If you change the order of the menu items then you need to update the CSS. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. In that case another way to target the menu you want to style would be needed. Something like .header-nav-item header-nav-item--folder:nth-of-type(n);

Let us know how it goes.

@creedonYour code worked beautifully for my site. I used it for a while and then, as you cautioned "If you add another Folder Page and it has as many or more items then it too would pick up this CSS." 

That's exactly what happened and so I'm now in need of "another way to target the menu" I want to style. My site is public: https://www.meetinghousefabric.com/ and I'd like to add the divider to the first nav menu—Shop—but none of the others. I played with your ".header-nav-item header-nav-item--folder:nth-of-type(n);" suggestion, but not coder enough to get it to work. Would you have time to help?

Thanks!

@watts-design

You can restrict the effect with something like the following.

.header-nav-item:first-child .header-nav-folder-item:nth-child( 6 ) {

  border-bottom : 1px solid;
  color : #9c9a84;
  margin-left : 25%;
  padding-bottom : 0.5em;
  
  }

.header-nav-item:first-child .header-nav-folder-item:nth-child( 7 ) {

  padding-top : 0.5em;
  
  }

.header-menu-nav-folder:nth-child( 2 ) .header-menu-nav-item:nth-child( 7 ) a {

  border-bottom : 1px solid;
  color : #9c9a84;
  display : inline-block;
  padding-bottom : 1em;
  
  }

Let us know how it goes.

@creedon, thanks!

For some reason your entire code didn't work. However, when I added just the .header-nav-item:first-child to the beginning of what I had it worked great.

I forgot to ask you to solve for mobile as well. Here's the mobile code I have now:

.header-menu-nav-item:nth-of-type(7) a {
  display: inline-block;
  border-bottom: 1px solid;
  padding-bottom: 1em;
  color: #9c9a84;
 }

Again, my website is https://www.meetinghousefabric.com/

And again, thanks!

2 hours ago, watts-design said:

I forgot to ask you to solve for mobile as well.

I have updated my post.

Thanks @creedon! Worked great, although I had to change color to border-color because it was coloring the nav item preceding the line.

You rock!

On 9/17/2020 at 3:37 PM, creedon said:

This is one way it could be done. Put the following in Design > Custom CSS.

.header-nav-folder-item {

  border-bottom: 1px solid;
  padding-bottom: 1em;
  padding-top: 1em;
  
  }

.header-nav-folder-item:last-child {

  border-bottom: unset;
  
  }

You can play with the border style and padding.

This is for a 7.1 site.

Let us know how it goes.

Hi there,

Thank you so much for this.  I am using the theme option on my site so the header colour changes depending on what theme is used first on the page.

You CSS works perfectly when i have a pale grey header and drop down, but i can't see the line on a black header/drop down. Can you help? I have attached screenshots.

13 hours ago, SophD90 said:

You CSS works perfectly when i have a pale grey header and drop down, but i can't see the line on a black header/drop down. Can you help?

I believe my code was written before the feature you are using was created by SS. Not sure if there is an easy solution but I'm willing to take a look.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.