How to add a line divider in between each link on the mobile menu?

Hello, is there a code I can use to add in lines in between each link like a divider on the mobile menu? Similar to the design on the rest of the website. Also remove the underline on the active link. Kindly see screenshots as reference.

Hi Ziggy, thank you so much! This worked!

I would just like to add if it's possible to remove the underline on the active link and instead change the color to something like white? So it doesn't look like it has 2 lines.

Add this as well to Custom CSS:

@media only screen and (max-width:767px) {
  :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
    background-image: none !important;
  }
}

If that works, can you mark my post as the solution and give it a like? Thanks!

Thank you so much for the help and fast revert! 

22 minutes ago, Miicherey said:

Thank you so much for the help and fast revert! 

Happy to help!

Hi Ziggy, about this topic.

Do you have any code to center the text within the lines? I would also like the lines to be max width. Is this possible?  This is the code I'm using currently.

div.header-menu-nav-item a {
    border-bottom: 1px solid #000;
    padding-bottom: 8vw;
    padding-left: 2.5vw;
    padding-right: 100vw;
}

I hope you can help me, thanks!

My url is madebylijn.nl.

On 4/24/2024 at 1:02 AM, Madebylijn said:

Hi Ziggy, about this topic.

Do you have any code to center the text within the lines? I would also like the lines to be max width. Is this possible?  This is the code I'm using currently.

div.header-menu-nav-item a {
    border-bottom: 1px solid #000;
    padding-bottom: 8vw;
    padding-left: 2.5vw;
    padding-right: 100vw;
}

I hope you can help me, thanks!

My url is madebylijn.nl.

Try this CSS code to center it.

.container.header-menu-nav-item.header-menu-nav-item--collection {
    text-align: center !important;
}

.header-menu-nav-item-content {
    display: block !important;
}

div.header-menu-nav-item a {
    padding: 5px !important;
}
body {
    overflow-x: hidden;
}

Hi, Thanks this code is great. I have successfully used the code to hide the underline of the current page on mobile view, but I am using the mobile menu view also to show on desktop. When I select the menu on desktop view the lines reappear. How can I adjust the code? See the screen shots and the underline on bar. Thanks in advance! Trevor

On 8/21/2024 at 7:48 PM, TrevH said:

Hi, Thanks this code is great. I have successfully used the code to hide the underline of the current page on mobile view, but I am using the mobile menu view also to show on desktop. When I select the menu on desktop view the lines reappear. How can I adjust the code? See the screen shots and the underline on bar. Thanks in advance! Trevor

So you want to remove line on Desktop? Can you share site url?