How can I add white dividing lines to my mega menu tabs?

Store Design
, , , ,
1

Hello, I need your help, I want my mega menu tabs to have white dividing line between them, Who can help me with that ? Thank you in advance !

I want dividing lines between TOP PICKS | JEWELRY | CULTURE

Screenshot 2023-09-14 at 3.51.09 AM.png
Screenshot 2023-09-14 at 3.51.09 AM.png2846×220 13.7 KB

2

Hello @AceStore
Its Artzen Technologies! We will be happy to help you today.

PLEASE SEND ME YOUR STORE URL

Let me know if need further assistance
Regards,
Artzen Technologies

3

Hello @AceStore
Its Artzen Technologies! We will be happy to help you today.

Follow the Below Steps:

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following CSS at the bottom of the file above 
​

AFTER ADDING ABOVE CSS THE RESULT:

Artzen_tech_1-1694679649675.png
Artzen_tech_1-1694679649675.png1342×603 242 KB

Let me know if need further assistance
Regards,
Artzen Technologies

4

Thank you, it works ! Do you know how to make dividing lines full header length and just on the right and left side of “JEWELRY”, Thank You in advance !

5

Hello @AceStore

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->styles.css>Add this code at the bottom.

li.navigation__item {
    border-right: 3px solid #fff;
}
li.navigation__item.navigation__item--with-children.navigation__item--with-small-menu {
    border-right: none;
}
6

@AceStore If helpful, pleaseLike and Accept this Solution to help others

7

Perfect, thank you so much, but do you how to make them full length, so lines touch the top and the bottom of the header ? Thank you in advance !