Cacher is the code snippet organizer for pro developers

{% comment %}
  Threshold amount of links where the multiple columns behavior needs to kick in.
{% endcomment %}

{% assign minimum_amount_of_links = 14 %}

{% comment %}
  How many columns you want. 2 or 3 or 4.
{% endcomment %}

{% assign number_of_columns = 2 %}

{% comment %}
  jQuery selector for the drop-down menus.
{% endcomment %}
  
{% assign dropdown_menu_selector = '.header ul ul, #header ul ul, header ul ul, .site-nav--dropdown' %}

{% comment %}
  Style for column separator. It's a border.
{% endcomment %}

{% assign column_separator = '1px solid #aaa' %}

{% comment %}
  Width of column. In pixels but no units please.
{% endcomment %}

{% assign column_width = '300' %}

{% comment %}
  Adding the .multiple-column class to drop-downs that contain too many links,
  in browsers that support column-count.
{% endcomment %}

<script>
$(function() {
  if ( $(window).width() > 768 && !Modernizr.touch && ( 'WebkitColumnCount' in document.body.style || 'MozColumnCount' in document.body.style || 'OColumnCount' in document.body.style || 'MsColumnCount' in document.body.style || 'columnCount' in document.body.style ) ) {
    $('{{ dropdown_menu_selector }}').filter(function() {
      return $(this).find('li').size() > {{ minimum_amount_of_links }}
    }).addClass('multiple-column');
  }
});
</script>

{% comment %}
  Apply the CSS.
{% endcomment %}

<style>
.multiple-column a {
  white-space: nowrap;
}
.multiple-column {
   -moz-column-count: {{ number_of_columns }};
-webkit-column-count: {{ number_of_columns }};
     -o-column-count: {{ number_of_columns }};
        column-count: {{ number_of_columns }};
     -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
       -o-column-gap: 10px;
          column-gap: 10px;
    -moz-column-rule: {{ column_separator }};
 -webkit-column-rule: {{ column_separator }};
      -o-column-rule: {{ column_separator }};
         column-rule: {{ column_separator }};
width: {{ number_of_columns | times: column_width }}px !important;
}
</style>