Jump to content

Add a separator line in drop down menu

Go to solution Solved by creedon,

Recommended Posts

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.

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
  • Solution

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.

Edited by creedon
version 2 of CSS, add mobile rules

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

Link to comment

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

 

Link to comment
  • 3 weeks later...

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

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
  • 4 weeks later...

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

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
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?

image.thumb.png.eb94f5f87f15462332cfdb01cf2ccb2c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 7 months later...

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

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

Link to comment

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

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

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

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

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.