Jump to content

Adding dividers to hamburger navigation on mobile

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Archived

This topic is now archived and is closed to further replies.

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