Liquid default expanded menu - css

Question

I have a liquid dropdown menu with a list of products that only expand when you click. I figured out how to open it by default when loading the site.
I simply found the <ul> tag for my dropdown list and changed it from 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, I would also like it to be closed by default on small screens.
So far I haven't been able to find a solution that allows me to do that. I'm open to both liquid and CSS solutions. Anyone got any ideas?
Here is my code as it looks now with the 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">
{% for 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">
{% for 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 and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</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">
{% for 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 and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
{% if link.title == 'Shop' %}
{{ link.title }}
{% else %}
{{ link.title }}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li>
{{ 'layout.customer.account' | t }}
</li>
<li>
{{ 'layout.customer.log_out' | t }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t }}
</li>
<li>
{{ 'layout.customer.create_account' | t }}
</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>

Answer 1

It's nothing that belongs to liquid or Shopify. You easily can do this with common solutions. For example you could use jQuery by putting something like this into your 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 you also could put the css code of .site-nav__submenu--expand into a condition for large devices like:
#media (min-width:960px) {
.site-nav__submenu--expand {...}
}