Adding dividers to hamburger navigation on mobile

Site URL: https://www.sammmies.com

Hello, How do I add horizontal dividers to my hamburger drop down menu on my mobile site? Also would like to add the search bar in there as well. Thanks!

Could you try this custom css

.Mobile-overlay-menu-main {
  border-right: 2px solid #000;
}
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item {
  border-bottom: 1px solid #ccc;
  padding-top: .618em;
}

This worked perfectly!! Thanks so much!

Wait, Looks like once I added the CSS it removed my social buttons from the navigation menu. I injected that code into the page header.

7 hours ago, DT386 said:

Wait, Looks like once I added the CSS it removed my social buttons from the navigation menu. I injected that code into the page header.

What's wrong

Hm, Not showing up on my end.

Must have been a glitch on my end. Looks like its now working great! Thanks so much.

40 minutes ago, DT386 said:

Must have been a glitch on my end. Looks like its now working great! Thanks so much.

 

I must be a cache issue

On 11/16/2020 at 2:55 AM, bangank36 said:

Could you try this custom css

.Mobile-overlay-menu-main {
  border-right: 2px solid #000;
}
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item {
  border-bottom: 1px solid #ccc;
  padding-top: .618em;
}

Hey, I'm completely new to CSS. Hope you can help. When I copy your code into the page header, it just displays the code itself above the header when complete. I'm obviously copying the code in wrongly? Thanks so much

1 hour ago, RossHarrison_1313 said:

Hey, I'm completely new to CSS. Hope you can help. When I copy your code into the page header, it just displays the code itself above the header when complete. I'm obviously copying the code in wrongly? Thanks so much

 

The place is Settings->Design->Custom Css, you added it to Advanced->Code Injection

Details

Squarespace 101: How to inject custom code – BeyondSpace

I'm using 7.1 so is Design -> Custom CSS, the place I need to be? I tried it there too but not working. Yikes, I'm sure it's something very simple. To be honest I'm struggling with everything to do with the mobile menu overlay. I finally found a way to reduce the font size and line height, however by reducing the line height I now have a strike through my nav title which I'm led to believe is actually an underline, it's just my line height set to low (which I wanted for the display of pages in the drop down menu. What I would really like is the folder titles in the drop down menu to be one size and the page links within eacd folder a smaller font. Is there anyway to do this? Would love to have your underlines for the nav titles as well. Is it just me over have SS really underdelivered with the mobile menu overlay?

Thanks so much for your help @bangank36 clearly I have no idea what I'm doing!

I sent my URL to you on another thread! - https://flatworm-finch-f4nw.squarespace.com/config/