css - Liquid default expanded menu -

i have liquid dropdown menu list of products expand when click. figured out how open default when loading site. found <ul> tag dropdown list , changed this:

 <ul id="collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false"> 

to this:

 <ul id="collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false"> 

however, closed default on small screens.

so far haven't been able find solution allows me that. i'm open both liquid , css solutions. got ideas?

here code looks default expand:

 <div class="grid">     <nav class="grid__item small--text-center medium-up--one-fifth" id="makeshort" role="navigation">     <hr class="hr--small medium-up--hide">     <button data-target="site-nav" id="togglemobilemenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="sitenav">       <span class="line"></span>       <span class="line"></span>       <span class="line"></span>       <span class="line"></span>       <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>     </button>      <div id="sitenav" class="site-nav" role="menu">       <ul class="list--nav">         {% link in menus.main-menu.links %}           {% assign child_list_handle = link.title | handleize %}           {% if menus[child_list_handle].links != blank %}             <li class="site-nav--has-submenu site-nav__element">               {% if link.title == 'shop' %}               <button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="collapsible{{ forloop.index }}">                 {{ link.title }}                  <span>+</span>               </button>               <button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="collapsible{{ forloop.index }}">                 {{ link.title }}                 <span>-</span>               </button>                <ul id="collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">                 {% childlink in menus[child_list_handle].links %}                   <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first , childlink.title contains 'all' , current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">                      <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>                   </li>                 {% endfor %}               </ul>             </li>             {% else %}                 <button class="site-nav__link btn--link site-nav__expand hidden" id="hideonlargescreen" aria-expanded="false" aria-controls="collapsible{{ forloop.index }}">                 {{ link.title }}                  <span>+</span>               </button>               <button class="site-nav__link btn--link site-nav__collapse" id="hideonlargescreen" aria-expanded="true" aria-controls="collapsible{{ forloop.index }}">                 {{ link.title }}                 <span>-</span>               </button>                <ul id="collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" id="hideonlargescreen" aria-hidden="false">                 {% childlink in menus[child_list_handle].links %}                   <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first , childlink.title contains 'all' , current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">                      <a href="{{ childlink.url }}" class="site-nav__link" id="hideonlargescreen">{{ childlink.title | escape }}</a>                   </li>                 {% endfor %}               </ul>               {% endif %}           {% else %}             <li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">               {% if link.title == 'shop' %}                 <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>               {% else %}                 <a href="{{ link.url }}" class="site-nav__link" id="hideonlargescreen">{{ link.title }}</a>               {% endif %}             </li>           {% endif %}         {% endfor %}         {% if shop.customer_accounts_enabled %}           {% if customer %}             <li>               <a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a>             </li>             <li>               <a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a>             </li>           {% else %}             <li>               <a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a>             </li>             <li>               <a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a>         </li>           {% endif %}         {% endif %}       </ul>      {% include 'custom.social-bar' %}     </div>     <hr class="medium-up--hide hr--small {% if template == 'index' %}{% if settings.home_section_1 == 'banner-image' or settings.home_section_1 == 'featured-products'  %}hr--border-bottom{% endif %}{% endif %}">   </nav> 

it's nothing belongs liquid or shopify. can common solutions. example use jquery putting theme js file:

$( window ).resize(function() {     if ($(window).width() < 700 ) { // size of "small"        $('.list--nav ul').addclass('site-nav__submenu--expanded').removeclass('site-nav__submenu--expand');     } else {        $('.list--nav ul').addclass('site-nav__submenu--expand').removeclass('site-nav__submenu--expanded');     } }); 

but put css code of .site-nav__submenu--expand condition large devices like:

@media (min-width:960px) {     .site-nav__submenu--expand {...} }