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 🙂