AndrewMantarro
9/11/2017 - 12:22 AM

Split Nav - with logo in center || not recommended on shop sites as you will need to change function to a bind event and it will flash a lit

Split Nav - with logo in center || not recommended on shop sites as you will need to change function to a bind event and it will flash a little as it loads

split-navCSS.css
content_copyfile_download
/*----split menu css----*/

#menu .sub-list {
  width: 40%;
  width: calc(50% - 140px); /*half width of logo*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
split-nav.js
content_copyfile_download
<script>
  
$(function(){
$( "nav > li" ).addClass( "topList" );
});

$(function(){
    var num_cols = 2,
    container = $('#menu nav'),
    listItem = '.topList',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($('<div ></div>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });
});

  
</script>