Adding multi column dropdown menu's

Collin4
Tourist
5 0 2

Hey,

Thanks for taking the time to read through, it would be great if anyone could help me with my question.

I am using the "Supply" theme and I made a dropdown menu as you can see on the attached picture. However, I am looking to add/change a piece of the code to be able to make a multi-column dropdown but so far I haven't been succesful in finding a solution.

The solution would be: after every 10th category, in my case "Mindfulness", I'd like to have a new column which prevents the list from becoming too long and instead make a new column. When I looked in one of the files, the data.json file I saw this type of code:

        "collection-row-1": {
          "type": "collection-rows",
          "settings": {
            "home_featured_row": "",
            "grid": 4,
            "rows": 1

This type of code looks like something I need, but I have no idea where I edit/input/change it to get it to work. I also found code for the dropdown in the file theme.scss.liquid, which is like this:

  .site-nav--dropdown & {
    display: inline-block;
    line-height: 1;
    top: 0;
    @include transform(rotate(-90deg));
  }

Now my guess is that I have to change something in the theme.scss.liquid but I am not sure...

This is the website: https://paper-moon-deisgn.myshopify.com/ 

I know that there are apps like Mega Menu that could do the trick, but I'd rather learn the code and reasoning behind it so I can learn and use it later if needed. I am a newbie in coding but I really enjoy it, so bare with me here please :) 

Thanks for any help!

Collin4
Tourist
5 0 2

One quick addition, the website is protected by a password because I am in the trial mode. The picture should say enough, though. Thanks!

0 Likes
Edan
Tourist
6 0 4

Hi there!

I'm facing a similar issue. We're you able to figure this out?

I'd rather not install a full plugin just to make two columns out of the extra-long list I have in the nav.

0 Likes