Formatting sub-nav into 2 columns

Technical Q&A
1

We have some very deep sub-navs for our site that we tried to break into 2 columns a while back, but now when we add new top level nav items, the sub-navs with 2 columns no longer align. You can see this on desktop with the Teams navigation. I really don’t like the look of the 2 column nav, so any help either a) helping to make the navigation dynamic in such a way that after X amount of navigation items, it creates 2 columns or some other treatment or b) i’m open to any other suggestions how best to display our deep navs.

www.lemonwater.ca (hover on Teams and you will see it is anchored to the right).

Thank you.

2

Hey @kenny

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1729271165657.png
Moeed_0-1729271165657.png1898×917 156 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Thanks @Moeed . I added but it didn’t seem to work. Do I need to remove the old code I had (if I can find :)).

4

Hey @kenny

Can you share a complete screenshot of where you added the code?

Best Regards,

Moeed

5

screenshot.png
screenshot.png1920×869 78.3 KB

6

After playing around with the rem, it looks like the code is working. The problem is, depending on the screen/window size, the rem moves and doesn’t align with the first level nav. Is there a way to anchor it to the first level AND is there a way to add a snippet that would allow all menus to split to 2-column after X amount of menu items? Thanks.