My menu/HEADER dropdown is not filling into two comumns and is converging into one

Store Design
1

Hello!

I am using the template “Envy.” I worked with a programmer to make on of my nested drop-downs two columns and be wrapped two columns and autofilled.

But as I add more to the navigation page the first column of the nested drop down gets longer and the items from the second column migrate to the first.

This is problematic because I want the columns to remain a specific height and hold only 8 navigation items per column. I am currently at 19 items in the first column and only 7 items in the second column.

The items in the drop down used to be evenly wrapped, I am not sure what happened. Any help would be greatly appreciated!

Thanks

I have attached a photo to show you what it looks like now.

IMG_3681.jpg
IMG_3681.jpg3024×4032 3.69 MB

This photo is what it used to look like and what I want it to look like

45001.jpg
45001.jpg1170×1160 273 KB

2
  1. In the left sidebar, navigate to the “Assets” folder and locate the file named “theme.scss.liquid” or a similar CSS file.
  2. Click on the file to open it for editing.
  3. Search for the CSS code that controls the styles for the nested drop-down menu. It may be indicated with a comment or contain a class such as “.nav-dropdown” or “.dropdown-menu”.
  4. Within that section, you can try adding the following CSS code to set a maximum height for each column and make them wrap evenly:
.nav-dropdown-column {
  max-height: 300px; /* Adjust the value to your preferred maximum height */
  overflow-y: auto;
}

.nav-dropdown-column ul {
  column-count: 2;
  column-gap: 20px; /* Adjust the value to your preferred gap between columns */
}
​
3

unnamed.jpg
unnamed.jpg3024×4032 2.98 MB

Hello NomtechSolution!

That fixed my problem about the column number and max height of wrapping, but now my submenu is off and appearing below the menu wrapping instead of on the side. How do I choose where it appears? I currently have this code:

.main-navigation-wrapper--center .nav:first-child .dropdown:nth-child(3) .dropdown-menu{ max-height: 375px; column-count: 3 !important; min-width: 480px !important;} .main-navigation-wrapper--center .nav:first-child .dropdown:nth-child(3) .dropdown-menu .dropdown-submenu .dropdown-menu{max-height: 135px; flex-wrap: wrap; column-count: unset !important; overflow: auto;} .main-navigation-wrapper--center .nav:first-child .dropdown:nth-child(3) .dropdown-menu:hover .dropdown-submenu .dropdown-menu{display: flex;} .main-navigation-wrapper--center .nav:first-child .dropdown:nth-child(3) .dropdown-menu .dropdown-submenu .dropdown-menu li{width: 50%;} .main-navigation-wrapper--center .dropdown-menu {background: #FFFEF7}

I want the submenu dropdown to look like this:

IMG-3736.jpg
IMG-3736.jpg2610×2237 1.86 MB

And then on the other side like this:

IMG-3737.jpg
IMG-3737.jpg3024×4032 3.67 MB

However, this submenu dropdown goes off the page, I want to be able to access everything within the wrapping regardless of window size.

If you could help me with this it would be greatly appreciated!