Impulse Theme Navigation Child Links into 1 and 2 columns

Technical Q&A
, ,
1

Hi,

I’m retheming a store: https://jimshore.com/ using the Impulse Theme and I need the child elements on the main navigation to have 2 columns in navigation with many links and 1 column in others due to only having 2-3 child elements. Since Impulse only allows multi columns when there is a grandchild element, I have custom CSS in place of the following, which works for menus with many child elements, but doesn’t work for the menu items that only have 2-3 child links.

@media screen and (min-width: 768px) {
.site-nav__dropdown {
column-count: 2;
column-gap: 20px;
padding: 0px 10px 0px 10px;
}
}

Is there any css I can use that takes that into consideration or do I need an If statement in the liquid file that says if less than 5 child links, make the column-count 1?

I see the following in the liquid nav file and maybe I can add an IF statement for this, but how would it be written?

{%- assign animation_column = animation_column | plus: 1 -%}

{%- for childlink in link.links -%}
{%- liquid
assign create_new_column = false

if childlink.levels > 0 and forloop.index != 1
assign create_new_column = true
endif

if childlink.levels == 0 and previous_column_type == ‘full’
assign create_new_column = true
endif
-%}

Thanks in advance,

Margie

2

Sorry to necro, but your question actually helped me fix the issue I was having, so it’s only right that I share with you a fix to your problem as well. Using the “has” pseudoclass, you can fix the issue of it looking off when there are less than a certain amount of childlinks. Here is how I’ve set it up for mine, as our client had one absurdly long dropdown - just change the nth-child amount to fit your use case. Without having to make changes to the liquid file. Hope this helps!
@media screen and (min-width: 768px) {
.site-nav__dropdown:has(> :nth-child(20)) {
column-count: 2;
column-gap: 20px;
padding: 0px 10px 0px 10px;
}
}

3

Hello!

Thank you so much for this. I’ll try it.

Margie