Add a separator line in drop down menu

Site URL: https://coverkitchen.squarespace.com

Hello, how can I add a separator line between specific items in a navigation drop drown menu?

I would like to adjust the space between the line and the items too.

See attached a screenshot of what I am trying to achieve.

Many thanks in advance!

Xavier

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? 

@Vivienne13

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!

@Aliwiper

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?

I would like to do this same thing on my site, but I cant seem to get it to work.

Why?

@PathfinderJake

Please post the URL for your site.

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 is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

hickoryhillsfamilydental.com

pathfinders123

It would be for the drop down menu under "Our Practice" 

I would like to add boxes or lines between each folder or entry.

Please see the following.

You'll need to change the ships line number from 2 to 1. Remove the lusitania line. Change the shipping lines line number from 5 to 1.

Let us know how it goes.

This worked great!

Is the horizontal line the only option? is there any way of surrounding the text with an entire box? or is the line the best method?

@PathfinderJake

The code for boxes is a bit different.

Add the following to Design > Custom CSS.

/* begin menu item borders */

  /* desktop */
  
   /* our practice */
   
  .Header-nav-item--folder:nth-of-type( 1 ) .Header-nav-folder-item {
  
    border : 1px solid;
    border-bottom : unset;
    padding : 0.25rem;
    
    }
    
  .Header-nav-item--folder:nth-of-type( 1 ) .Header-nav-folder-item:last-child {
  
    border-bottom : 1px solid;
    
    }
    
  /* mobile */
  
  .Mobile-overlay-folder:nth-of-type( 1 ) .Mobile-overlay-folder-item {
  
    border : 1px solid;
    border-bottom : unset;
    
    }
    
  .Mobile-overlay-folder:nth-of-type( 1 ) .Mobile-overlay-folder-item:last-child
  
    {
    
      border-bottom : 1px solid;
      
      }
      
  /* end menu item borders */

This is for v7.0 using the Brine template family.

Let us know how it goes.

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/

🙏

@jallory

Add the following to Design > Custom CSS.

/*

  begin menu item dividers for all
  
  Version         : 0.1d0
  
  SS Version      : 7.0
  
  v7.0 Templates  : Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed,
                    Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                    Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                    Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                    Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne,
                    Vow, Wav, West )
                    
                    your template is not listed? then it is not currently
                    supported
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  :root {
  
    --menu-item-divider-color : #6e8887;
    
    }
    
  /* desktop */
  
    .Header-nav-item--folder .Header-nav-folder-item {
    
      border-bottom : 1px solid var( --menu-item-divider-color );
      margin-bottom : 0.5em;
      padding-bottom : 0.75em;
      
      }
      
    .Header-nav-item--folder .Header-nav-folder-item:last-child {
    
      border-bottom : unset;
      margin-bottom : unset;
      padding-bottom : 0.382em;
      
      }
      
  /* mobile */
  
    .Mobile-overlay-folder .Mobile-overlay-folder-item {
    
      border-bottom : 1px solid var( --menu-item-divider-color );
      margin-bottom : 0.5em;
      padding-bottom : 0.5em;
      
      }
      
    .Mobile-overlay-folder .Mobile-overlay-folder-item:last-child {
    
      border-bottom : unset;
      margin-bottom : unset;
      padding-bottom : 0.618em;
      
      }
      
  /* end menu item dividers */

Let us know how it goes.