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

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


Question

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 

Link to comment

10 answers to this question

Recommended Posts

  • 1

@Oceanliner_Designs

Add the following to Design > Custom CSS.

// begin menu item dividers, uses LESS syntax

  // desktop
  
  .Header-nav-item--folder:nth-of-type( 2 ) { // ships
  
    .Header-nav-folder-item:nth-of-type( 3 ), // lusitania
    .Header-nav-folder-item:nth-of-type( 5 ) // shipping lines
    
      {
      
        border-bottom : 1px solid;
        margin-bottom : 0.5em;
        padding-bottom : 0.75em;
        
        }
    }
    
  // mobile
  
  .Mobile-overlay-folder:nth-of-type( 2 ) { // ships
  
    .Mobile-overlay-folder-item:nth-of-type( 3 ), // lusitania
    .Mobile-overlay-folder-item:nth-of-type( 5 ) // shipping lines
    
      {
      
        border-bottom : 1px solid;
        margin-bottom : 0.5em;
        padding-bottom : 0.5em;
        
        }
    }
    
  // end menu item dividers

This is for v7.0 using the Brine template family and is very specific to the poster's need. All the previous caveats apply. You'll need to remove the place holders first.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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!

Screen Shot 2021-08-17 at 1.11.46 AM.png

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

Screen Shot 2021-08-17 at 1.11.46 AM.png

Hi. What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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!

Link to comment
  • 0

@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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...