XF 1.4 How can I enable template only for mobile size

[ibaker]

I am building a new menu system for my site (https://xenforo.com/community/threads/new-site-menu-system.92508/) which contains a new desktop menu and a new mobile menu.

I am trying to split the two but having a problem with the search_bar template. The desktop menu uses a different search_bar template that comes in after @media (min-height:650px). Below this height I want to use the default search_bar template.

However the "header template has a xen:include template="search_bar" and the public.css has a xen:include template="search_bar.css" in them.

Is there anyway I can use like an xen:if or @media or ??? to only include these templates on screen height less than 650px.

For the search_bar.css I could encapsulate the entire template content with a @media (max-height:650px) but how can I do the same for the search_bar template like an xen:if or ???

This has really got me stumped so any help is greatly appreciated...thanks

 

[cclaerhout]

You should do that with this.

 

[ibaker]

Thanks cclaerhout, after looking at that I am unsure how to include the search_bar template only on screens less than 650px in height, can you suggest?

 

[cclaerhout]

Thanks cclaerhout, after looking at that I am unsure how to include the search_bar template only on screens less than 650px in height, can you suggest?

You can't make a condition with the xen tag "include" based on a screen width ; with the media css queries you can customize css but all elements will be loaded on the page, so if you really need to set it according to a screen width, both menus (mobile and classic) must be loaded on the page, then you can play with the display property.

If you just need to target a mobile device or a tablet device (that will ignore the screen width, that's just data), then see the addon quoted above.