Jump to content

Border around mobile navigation

Recommended Posts

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

Hi,

I have used code to create a hamburger menu on my website. I am wanting however to add a border around navigational items like the picture attached. Does anyone know how I could  do this?

 

Also I'm unsure how to fix the folder navigation item I created, I want it to be a drop down instead of the arrows and having to click back to return to the menu. See 2nd and 3rd attached pictures.

 

Thank you

Screen Shot 2022-01-22 at 11.03.25 am.png

Screen Shot 2022-01-22 at 11.21.13 am.png

Screen Shot 2022-01-22 at 11.21.20 am.png

Edited by Indi
Link to comment
On 1/22/2022 at 8:07 AM, Indi said:

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

Hi,

I have used code to create a hamburger menu on my website. I am wanting however to add a border around navigational items like the picture attached. Does anyone know how I could  do this?

 

Also I'm unsure how to fix the folder navigation item I created, I want it to be a drop down instead of the arrows and having to click back to return to the menu. See 2nd and 3rd attached pictures.

 

Thank you

Screen Shot 2022-01-22 at 11.03.25 am.png

Screen Shot 2022-01-22 at 11.21.13 am.png

Screen Shot 2022-01-22 at 11.21.20 am.png

For the border navigator, kindly try adding to Home > Design > Custom Css

.Mobile-overlay-nav-item {
  border-top: 1px solid;
  padding-bottom:0;
  padding: 0 20px;
}
.Mobile-overlay-nav-item:last-child {
  border-bottom: 1px solid;
}
.Mobile-overlay-menu-main {
  padding:60px 0 0 0;

}
.Mobile-overlay-menu {
  width: 100%;
}
.Mobile-overlay-close {
  z-index:2;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

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

My testing 

image.thumb.png.da943a6e18ed1ecc390dff16e08525e1.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
11 hours ago, Indi said:

That works amazingly! 

Thank you 🙂

Can ask if there is a way to also get a border around the whole menu as well? As seen in the picture.

1454805820_Image26-1-22at10_52am.thumb.jpg.ef1b167d7892b3c453d79455b7c639b2.jpg

 

It looks like you solved with this CSS?

.Mobile-overlay-menu-main {
    padding: 60px 0 0 0;
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

 

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

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.