1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 How can I enable template only for mobile size

Discussion in 'Styling and Customization Questions' started by ibaker, Feb 12, 2015.

  1. ibaker

    ibaker Well-Known Member

    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
     
    Last edited: Feb 12, 2015
  2. cclaerhout

    cclaerhout Well-Known Member

    You should do that with this.
     
  3. ibaker

    ibaker Well-Known Member

    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?
     
  4. cclaerhout

    cclaerhout Well-Known Member

    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.
     

Share This Page