<p>I have a requirement that a menu is open on wider breakpoints and closed on mobile breakpoints. To make it open i have a class i would toggle on my menu.</p>

<p>I can do this with JS but i get a FOUC on the menu on mobile, since it opens at first and then closes. So what i would ideally do is do this server side and exclude the class.</p>

<p>Is there some way with craft templates to set a variable containing the breakpoint or screen size?</p>

<p>Fx..</p>

<blockquote>
  <p>{%set isMobileSize =  ??? %}</p>
</blockquote>

<p>Ideally this would get the page size in the request and set this when rendering the page/template?</p>

CC BY-SA 3.0
2016-03-28T16:23:10.673Z
Just so I understand, is the question "Can I set a Twig variable to the browser's current screen size?"
Brad Bell
CC BY-SA 3.0
2016-03-28T16:39:50.833Z
Is there a reason why you can't set the menu to be "closed" initially with CSS on mobile breakpoints and then have it "open" on larger ones? That's usually a "mobile first" approach...
RitterKnight
CC BY-SA 3.0
2016-03-28T19:39:36.760Z
Yes thats the question in a way but i need to be able to quality > a size
Tim
CC BY-SA 3.0
2016-03-28T19:40:36.870Z
In that case i have the reserve FOUC content problem where the menu appears closed and then open.
Tim
<templating>
Set a Template Variable Based on Breakpoint
# Set a Template Variable Based on Breakpoint

(Asked by: username_0 on 2016-03-28)

I have a requirement that a menu is open on wider breakpoints and closed on mobile breakpoints. To make it open i have a class i would toggle on my menu.

I can do this with JS but i get a FOUC on the menu on mobile, since it opens at first and then closes. So what i would ideally do is do this server side and exclude the class.

Is there some way with craft templates to set a variable containing the breakpoint or screen size?

Fx..

> {%set isMobileSize = ??? %}

Ideally this would get the page size in the request and set this when rendering the page/template?

**Tags:** templating

> **Comments:**
> **username_1**: Just so I understand, is the question "Can I set a Twig variable to the browser's current screen size?"  
> **username_2**: Is there a reason why you can't set the menu to be "closed" initially with CSS on mobile breakpoints and then have it "open" on larger ones? That's usually a "mobile first" approach...  
> **username_0**: Yes thats the question in a way but i need to be able to quality > a size  
> **username_0**: In that case i have the reserve FOUC content problem where the menu appears closed and then open.  

---

## 0 answers

