Drop down menu too long

Galini_Devouros
New Member
3 0 1

Hi, 

Searching the forum for an answer, I noticed many users had the same problem as I do. 
My drop down menus are extremely long.

Is there a way to change that? 

Thanks!
 

Replies 19 (19)
Caroline_Schnap
Shopify Staff
5705 1 357

Hi Galini!

Try adding the following at the bottom of your Themes > Template Editor > Layout > theme.liquid file:

<script>
$(function() {
  if ('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) {
    $('ul.dropdown').filter(function() {
      return $(this).find('li').size() > 16
    }).addClass('two-column');
  }
});
</script>

<style>
.two-column {
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
-moz-column-gap:0px;
-webkit-column-gap:0px;
-o-column-gap:0px;
column-gap:0px;
min-width: 350px !important;
}
</style>

This will break into 2 columns of links drop-down menus that contain more than 10 links.

This will work in browsers that support the column-count property: http://caniuse.com/multicolumn

Let us know how that goes!

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Galini_Devouros
New Member
3 0 1

Caroline,

Thank you for your reply!
It did worked fine.

However, I was wondering if I could have more that 2 columns -since the links I need are about 35 (!!)

 

Caroline_Schnap
Shopify Staff
5705 1 357

Sure thing! In the CSS, where you see 'column-count', replace 2 with 3.

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

k_wiggins
New Member
2 0 0

Hi Caroline,

I'm having the same problem with my drop-down menu, however, I can't get the code you added to work. Should I just add it to the end of the theme.liquid file>

Many thanks,

Kev

Alex135
Astronaut
1889 2 471

Kev, in addition to Caroline's code, you'll need to make another small addition to your Liquid code.  Find the file that contains the code for your dropdown menus.  (It's likely a snippet.)  Look for something similar to the block of code below.  (I had to guess at what your Liquid code might look like.)

  <nav class="main-menu">
    <ul>
      {% for link in linklist['main-menu'] %}
          <li><a href="{{link.url}}" class="trans-1">{{link.title}}</a></li>
            <ul>
          {% for sublink in link.object.links %}
                      <li><a href="{{sublink.url}}">{{sublink.title}}</a></li>
          {% endfor %}
            </ul>
          </li>
      {% endfor %}

    </ul>

    ...

  </nav>
<!-- END .main-header -->

In the fifth line, assign the second <ul> with the "dropdown" class.

<ul class="dropdown">

I hope this helps.

k_wiggins
New Member
2 0 0

Hi Alex,

Thanks for taking the time to look into this for me. I really appreciate it. Your extra bit of code worked perfectly.

Thanks again!

Kev ; )

Not applicable
1988 0 0

Using the Supply theme and noticed there are some formatting issues with mobile and it not working well with IE9 and Safari. The dropdowns don't work at all in IE9 and the hover delay is atrocious in Safari on a desktop PC.

Any thoughts?

Andy53
Tourist
4 0 6

Alex,

Hope to catch you on this thread again. I'm looking for the second bit of code that you listed above that you suggested might be a snipppet. Only thing that I've found similar is in the theme.liquid.

I added your first bit of code and then changed ul.dropdown to ul.submenu and I got it to give me the multicolumn but it lags when hovering over anything in the second column. have you seen that happen before?

 

<div class="row">
        <nav class="navigation desktop-12">
          <ul class="nav">
            {% for link in linklists.main-menu.links %}
            {% capture link_handle %}{{ link.title | handle }}{% endcapture %}
            {% capture linkurl %}{{ link.url }}{% endcapture %} 
            {% capture child_list_handle %}{{ link.title | handleize }}{% endcapture %}          
            {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
            <li class="dropdown">{{ link.title | link_to: link.url }}  
              <ul class="submenu">
                {% for l in linklists[child_list_handle].links %}
                {% capture child_list_handle %}{{ l.title | handleize }}{% endcapture %}
                {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}      
                <li class="nest"><a href="{{ l.url }}">{{ l.title }}</a>                 
                  <ul class="nested">
                    {% for l in linklists[child_list_handle].links %}
                    <li><a href="{{ l.url }}">{{ l.title }}</a></li>
                    {% endfor %}
                  </ul>
                </li>
                {% else %}
                <li><a href="{{ l.url }}">{{ l.title }}</a></li>    
                {% endif %}

                {% endfor %}
              </ul>
            </li>
            {% else %}
            <li>{{ link.title | link_to: link.url }}</li>
            {% endif %}     
            {% endfor %}
          </ul>

Alex135
Astronaut
1889 2 471

Not much can be done with the information that you provided.  You may want to consider providing your storefront password.