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

Adding dividers to hamburger navigation on mobile


DT386
Go to solution Solved by bangank36,

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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:

What's wrong

Posted Images

10 answers to this question

Recommended Posts

  • 1

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;
}

image.png.9a58a7baef52e8642d2cbe543175afb7.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.3bfc81465b5e137debaa924f91f0d911.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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;
}

image.png.9a58a7baef52e8642d2cbe543175afb7.png

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

 

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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/

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...