Multi-column drop down menu - Boighor theme

New Member
2 0 0

Hello, 

 

I have very limited knowledge on coding and design, but is there a way to change the drop down menu (BY YEAR) for the link list? They are all organized in to one column, but it is too long. I would like to have it into at least two or three columns so the menu isn't as long. I already try to add script into Layout/Theme.liquid or  Assets/timber.scss.liquid :

 

<script>
  var maxRows = 6;
  $('.main ul.dropdown').each( function() {
    var totalRows = $(this).children('li').length;
    var columns = Math.ceil(totalRows/maxRows).toString();
    $(this).css({
      "-webkit-column-count": columns,
      "-moz-column-count": columns,
      "column-count": columns
    });
  });
</script>

 

But it doesn't work. Preview in:  https://o4agelxw3evemyxo-6516539445.shopifypreview.com

 

I would like to add one row for YEAR 6 ,7 ,8,9, 10 under row YEAR 1,2,3,4,5

 

Thank you for your time,

Eric.

 

0 Likes
Highlighted
Shopify Partner
2000 25 540

Eric, 

the script does not work because there is no '.main ul.dropdown'  elements... Also, the width of the menu drop-downs is limited. You can try adding the following to the bottom of your stylesheet:

.drop .megamenu {
    flex-wrap: wrap;
}

.drop .megamenu ul {
    padding-bottom: 20px;
}

.drop .megamenu ul .title {
    margin-bottom: 0px !important;
}
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
2 0 0

It worked perfectly.

 

Thanks Tim.

0 Likes