Border around mobile navigation

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

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

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

My testing 

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

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.

 

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

@tuanphan Yes, I figured it out 🙂

@tuanphan Hey! I've tried using the above code to add a border around my desktop navigation (I've added the mobile burger style) but it isn't working. Any ideas?

https://asparagus-helicon-shhr.squarespace.com/

Thanks so much!

On 8/31/2023 at 6:05 PM, gstudio said:

@tuanphan Hey! I've tried using the above code to add a border around my desktop navigation (I've added the mobile burger style) but it isn't working. Any ideas?

https://asparagus-helicon-shhr.squarespace.com/

Thanks so much!

Your site is private. You can follow this guide to share url, we can check easier

@tuanphan I've made the site password protected now

https://asparagus-helicon-shhr.squarespace.com/

Password: EDR2023

Here's a pic of what I'm trying to achive... a border around the nav where the red line is and to remove the nav background from the header.

Thanks so much!

On 11/14/2023 at 6:54 PM, gstudio said:

@tuanphan I've made the site password protected now

https://asparagus-helicon-shhr.squarespace.com/

Password: EDR2023

Here's a pic of what I'm trying to achive... a border around the nav where the red line is and to remove the nav background from the header.

 

Thanks so much!

Use this CSS code

.header-menu-nav-folder-content {
    border: 1px solid red;
    background-color: var(--menuOverlayBackgroundColor);
}
.header-menu-bg.theme-bg--primary {
    background-color: transparent !important;
}

@tuanphan Thanks so much, that has worked. The only thing is the menu overlay is cut short slightly, so the button doesn't have a background. See below... any idea how to extend it down? Thanks again for your help!

On 11/18/2023 at 9:55 AM, tuanphan said:

Use this CSS code

.header-menu-nav-folder-content {
    border: 1px solid red;
    background-color: var(--menuOverlayBackgroundColor);
}
.header-menu-bg.theme-bg--primary {
    background-color: transparent !important;
}

 

Change first code to this

 .header-menu-nav {
        border: 1px solid #000;
        background-color: var(--menuOverlayBackgroundColor)
    }