Impulse Theme Navigation Child Links into 1 and 2 columns

Impulse Theme Navigation Child Links into 1 and 2 columns

35 0 5


I'm retheming a store: 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?


<div class="site-nav__dropdown megamenu text-left">
<div class="page-width">
<div class="grid{% if dropdown_alignment == 'center' %} grid--center{% endif %}">
<div class="grid__item medium-up--one-fifth appear-animation appear-delay-{{ animation_column }}">
{%- 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

if childlink.levels == 0 and previous_column_type == 'full'
assign create_new_column = true


Thanks in advance,


Replies 0 (0)