Jump to content

Adding dividers to hamburger navigation on mobile

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution

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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
  • 3 weeks later...
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 comment
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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment

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