Impulse Theme Navigation Child Links into 1 and 2 columns

Impulse Theme Navigation Child Links into 1 and 2 columns

mreynolds
Excursionist
35 0 5

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?

 

<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
endif

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

 

Thanks in advance,

Margie

Replies 0 (0)