glFusion Wiki

Site Tools


glfusion:styling:mobile_menu

Mobile Menus

With glFusion's responsive features, you can have an off-canvas menu when your site is viewed in a small viewport, such as mobile phones or tablets.

New installs of glFusion have the mobile menu setup automatically, but older sites that have upgraded from previous versions earlier than v1.5.0 will need to create the mobile menu.

Creating The Mobile Menu

To create a mobile menu, go to Menu Builder and click the “copy” icon on the “navigation” menu. Give the new menu the name navigation_mobile. If you look in header.thtml in the CMS theme, you will see two auto tags for menus:

{!! autotag menu:navigation !!} - This displays the standard menu when viewing the site on larger screens.

{!! autotag menu:navigation_mobile !!} - This is the mobile, off-canvas menu displayed on smaller screens.

<nav class="uk-navbar tm-navbar">
  <div class="uk-hidden-small">{logo_block}</div>
 
  {!! autotag menu:navigation !!}        
 
  <div class="uk-navbar-flip">
    <div class="uk-navbar-content uk-hidden-small">
      <form method="get" action="{site_url}/search.php" class="uk-form uk-margin-remove uk-display-inline-block">
        <input type="search" class="uk-form-width-small" placeholder="{$LANG09[10]}" autocomplete="off" name="query">
        <input type="hidden" name="type" value="all">
        <input type="hidden" name="mode" value="search">
        <input type="hidden" name="results" value="{num_search_results}">
      </form>
    </div>
  </div>
 
  {!! autotag uikitlogin: !!}
 
  {!! autotag menu:navigation_mobile !!}        
 
  <div class="uk-navbar-flip uk-navbar-flip uk-visible-small">
    <a href="{site_url}/search.php" class="tm-navbar-toggle uk-navbar-toggle uk-navbar-toggle-alt"></a>
  </div>
 
  <div class="uk-navbar-brand tm-navbar-brand-oc uk-navbar-center uk-visible-small">
    <a href="{site_url}">{site_name}</a>
  </div>
</nav>

These match up with the menus of the same name in Menu Builder.

Once you have created the menu named navigation_mobile, glFusion should automatically display it on smaller screens. That's all you need to do!

glfusion/styling/mobile_menu.txt · Last modified: 2017/04/12 21:11 (external edit)

Page Tools