Finding window width in liquid

Question

I am looking for a way to use an if statement including the viewport width directly in Liquid, not in CSS.

What I want to do is the following: I have two different navigations for my website, one of them should be used for the mobile version and the other for the desktop version. In Liquid the navigation is loaded into the header like this:

        {% include 'navigation' %}

So I hope I can do something like this:

    {%- if width > 1000 -%}
        {% include 'navigation' %}
    {%- else -%}
        {% include 'navigation-mobile' %}
    {%- endif -%}

Thank you guys in advance!

Answer 1

Liquid is a back-end framework, which means that it doesn't have access to the document and window objects or any of the front-end stuffs.

To say it simply Liquid loads before it actually knows what is the window width. (in developer words, it loads before the DOM is ready)

Or long story short, there is no way to access the window width from liquid, so you are fighting a lost battle here.

Consider using Javascript to add a class to a specific navigation in order to show it.