How to add vertical lines to a desktop mega menu?

Store Design
,

Topic summary

A user seeks CSS code to add vertical dividing lines between columns in their desktop mega menu.

Proposed Solution:

  • Navigate to Online Store → Theme → Actions → Edit code
  • Open Assets → base.css file
  • Add CSS targeting .site-nav__dropdown with flexbox display
  • Insert border-right properties on .grid__item:not(:last-child) elements
  • Customize line color (default #ccc) and spacing via padding/margin values

Current Status:
The suggested code did not work for the original poster. A community member requested the store URL and password (if applicable) to provide further troubleshooting assistance. The store URL was shared (cheluxboutique.com), but the issue remains unresolved.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello! I am looking for coding to add vertical lines to the mega menu on desktop.

like this:

8666C724-8CCE-4FE3-AFBA-4540896D5E9C.jpeg
8666C724-8CCE-4FE3-AFBA-4540896D5E9C.jpeg2732×1823 253 KB

2

Hello @chelux ,

Here is our suggestions:

  1. Go to Online Store → Theme → Actions → Edit code

Screen Shot 2023-04-10 at 11.13.01.png
Screen Shot 2023-04-10 at 11.13.01.png1433×764 109 KB

  1. Go to Assets → base.css file → add the following code below the one incude “site-nav__dropdown”:
.site-nav__dropdown {
  display: flex;
}

.site-nav__dropdown .grid__item:not(:last-child) {
  border-right: 1px solid #ccc;
  padding-right: 20px;
  margin-right: 20px;
}

  1. You can adjust the color of the lines by changing the #ccc value, and you can adjust the spacing between the columns by changing the padding-right and margin-right values.

  2. Save and preview.

Hope this can help you out.

Ali Reviews team.

3

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

4

Unfortunately, this did not work.

5