Add a separator line in drop down menu

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.

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.

@creedon Many thanks for helping out with this. However, the code adds a separator between each item. Instead, I need to target a specific item. As you can see from the screenshot, I would like to add a line between "Comedy" and "Interior". Would that be possible?

Sorry I completely missed that requirement. I'd be glad to give it another go. However your site is now private.

Please set up a site-wide password. Post the password here and then we can take a look at your issue.

@creedonSure, here is the password: coverkitchen2020

Let me know how it goes. Many thanks again!

@creedon It works perfectly and it looks beautiful! Thank you for your amazing work.

Would be possible to replicate this for mobile view? Currently, the line does not show with hamburger menu. I have a code that aligns the menu to the right on mobile, not sure if that needs to be taken on account. Having the separator for mobile too would be perfect!

I've updated my previous post with an updated version of the CSS adding rules for mobile. 

@creedonYou are awesome. Can't thank you enough for this!

Hi, do you have a solution for v7 website? 

It is hard to know without seeing your site or knowing where you want the separators to appear.

Please give us the URL for your site. If you've not already do so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Also please give us more detail about where you want these separators to appear.

Hi Creedon, I'm looking for exactly this solution in a 7.0 website - https://alastairphilipwiper.com/ - in the drop down menu " work" I would like to add a divider underneath "buildings" to have a new section - do you think it is possible? Thanks!

I'll take a look now.

@Aliwiper

Add the following to Design > Custom CSS.

/* desktop */

#topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 4 ) {

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

#topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 5 ) {

  padding-top: 1em;
  
  }

/* mobile */

html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 4 ) a {

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

html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 5 ) a {

  padding-top: 1em;
  
  }

This is for a v7.0 using the Forte template. Its also specific to Aliwiper's site and has the same caveats I mentioned in my previous post.

Let us know how it goes.

@creedon this is absolutely perfect, just what I was looking for!!! Thank you so much for your help Thomas

On 11/4/2020 at 6:04 PM, Aliwiper said:

@creedon this is absolutely perfect, just what I was looking for!!! Thank you so much for your help Thomas

Some feedbacks on your site, hope it useful

1. (Mobile) Some pages have very long content, you should add a back to top button. There are some code on forum, you can search ;)

Or you can add text link with url: # in footer, user click on it, it will jump to top of page

2. (Mobile) Space between header - content is too big? If you feel not good, add this to Design > Custom CSS

@media screen and (max-width: 640px) {
body:not(.homepage) header#header {
    padding-bottom: 20px;
}
}

3. (Tablet) text is a bit narrow. Do you want stack them + increase text width?