How can I add a line in a drop-down menu at a specific point?

Site URL: http://www.oceanlinerdesigns.com

Hi Squarespace and coding experts!

I was hoping to add a line in my drop-down menu so as to separate the items into two blocks so it is not as much of a visual overload. I came across this thread;

https://forum.squarespace.com/topic/170124-add-a-separator-line-in-drop-down-menu/

Which seemed to be on the right track! Could anyone help me out with it? It seems the code must be very specific to the site theme and layout. The site is https://www.oceanlinerdesigns.com/ and the drop-down is "Ships". You can see where I have built a blank page named '-' as a temporary measure. If anybody could point me in the right direction to where code for this might exist as a template I would be mighty grateful! 😃

~Mike 

@creedon You nailed it mate thankyou so very much! 🙂
~Mike

@creedon I looked back at several of your answers relating to this question, but couldn't find a solution specific to my needs on a 7.1 template. I'd like to be able to add a line between two menu items on the drop down menu.

Personal Coaching

   Services

   FAQs

   ____________ (a solid line)

   Life Event Support


Thank you for what you do!

On 8/17/2021 at 3:14 PM, QuickBrwnFox said:

@creedon I looked back at several of your answers relating to this question, but couldn't find a solution specific to my needs on a 7.1 template. I'd like to be able to add a line between two menu items on the drop down menu.

 

Personal Coaching

   Services

   FAQs

   ____________ (a solid line)

   Life Event Support


Thank you for what you do!

Hi. What is your site url?

@creedonThis was super helpful, thank you! Just used it on my client's site: https://www.coreresponse.org/ under Our Work and it looks great.

@tuanphan https://coachingseason.com

@creedon Might I ask you for some help removing the line from the secondary Nav on https://www.coreresponse.org/?

The line splitting the items above Haiti Earthquake is all that I want visible but I'm realizing that now there is a line on the secondary nav under the COVID-19 dropdown that shouldn't be there. Can that be removed?

This is the code I used:

// begin menu item dividers, uses LESS syntax

  // desktop
  
 
    .Header-nav-folder-item:nth-of-type( 5 ) // community-building    
      {
      
        border-bottom : 1px solid;
        margin-bottom : 0.5em;
        padding-bottom : 0.75em;
        
        }
    
  // mobile
  
    .Mobile-overlay-folder-item:nth-of-type( 5 ) //community-building    
      {
      
        border-bottom : 1px solid;
        margin-bottom : 0.5em;
        padding-bottom : 0.5em;
        
        }
    
  // end menu item dividers

Thank you for your help!

@carly.pearlman

The reason your code is adding lines to two menus is the code for restricting the effect to a particular top level nav item is missing. My original code first targeted the navigation folder then the page within the folder.

You're in luck as I've updated my code. It addresses issues I hadn't noticed in the original code, that the line itself was changing when the nav item is hovered over. Among some other tweaks.

Replace your code with the following.

/*

  begin drop-down navigation menu dividers
  
  Version         : 0.2d0
  
  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
  
  Dependancies    : LESS
  
  Notes           : need to add more than one menu divider? just replicate the
                    lines that have nth-child in them.
                    
                    for desktop make the nth-child numbers match the positions
                    of the drop-down navigation menus and drop-down menu items
                    
                    for mobile the position system is different. you count only
                    the navigation menus. first navigation menu, second, and
                    etc. to get the position number. the menu item position
                    sytem is the same as for desktop, keeping in mind SS adds a
                    back item automatically to your mobile menus
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @border-top : 1px solid;
  
  // desktop
  
    .Header-nav--primary {
    
      .Header-nav-item--folder:nth-child( 2 ), // our work
      
        {
        
          .Header-nav-folder-item:nth-child( 6 ), // haiti earthquake
          
            {
            
              .divider ( 1em, white ); // margin-bottom, color
              
            }
            
          }
          
        }
        
  // mobile
  
    .Mobile-overlay-folder:nth-child( 1 ), // our work
    
      {
      
        .Mobile-overlay-folder-item:nth-child( 7 ), // haiti earthquake
        
          {
          
            .divider ( 0.75em, black ); // margin-bottom, color
            
          }
          
        }
        
  // divider
  
    .divider ( @margin-bottom, @color ) {
    
      &:before {
      
        border-top : @border-top @color;
        content : '';
        display : block;
        margin-bottom : @margin-bottom;
        
        }
        
      }
      
  // end drop-down navigation menu dividers

Let us know how it goes.

@QuickBrwnFox

I just updated my v7.0 code. Give me several days to see what might be done for a v7.1 site. If I don't get back with some code soon, please bump this thread.

11 hours ago, creedon said:

@carly.pearlman

The reason your code is adding lines to two menus is the code for restricting the effect to a particular top level nav item is missing. My original code first targeted the navigation folder then the page within the folder.

You're in luck as I've updated my code. It addresses issues I hadn't noticed in the original code, that the line itself was changing when the nav item is hovered over. Among some other tweaks.

Replace your code with the following.

/*

  begin drop-down navigation menu dividers
  
  Version         : 0.2d0
  
  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
  
  Dependancies    : LESS
  
  Notes           : need to add more than one menu divider? just replicate the
                    lines that have nth-child in them.
                    
                    for desktop make the nth-child numbers match the positions
                    of the drop-down navigation menus and drop-down menu items
                    
                    for mobile the position system is different. you count only
                    the navigation menus. first navigation menu, second, and
                    etc. to get the position number. the menu item position
                    sytem is the same as for desktop, keeping in mind SS adds a
                    back item automatically to your mobile menus
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @border-top : 1px solid;
  
  // desktop
  
    .Header-nav--primary {
    
      .Header-nav-item--folder:nth-child( 2 ), // our work
      
        {
        
          .Header-nav-folder-item:nth-child( 6 ), // haiti earthquake
          
            {
            
              .divider ( 1em, white ); // margin-bottom, color
              
            }
            
          }
          
        }
        
  // mobile
  
    .Mobile-overlay-folder:nth-child( 1 ), // our work
    
      {
      
        .Mobile-overlay-folder-item:nth-child( 7 ), // haiti earthquake
        
          {
          
            .divider ( 0.75em, black ); // margin-bottom, color
            
          }
          
        }
        
  // divider
  
    .divider ( @margin-bottom, @color ) {
    
      &:before {
      
        border-top : @border-top @color;
        content : '';
        display : block;
        margin-bottom : @margin-bottom;
        
        }
        
      }
      
  // end drop-down navigation menu dividers

Let us know how it goes.

That worked! Looks great, thank you for your quick reply!