YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar michael.maass Support asked

[Tutorial] The "mobile" menu and logo in a Warp 7 theme/template

You have no menu anymore when you resize the window or look at your Warp 7 template/theme on a smartphone or tablet? There is no logo shown at lower resolutions?

Both can quickly be added by following these steps:


Joomla

The "offcanvas" menu:

  • Go to Extensions > Module Manager and look for the module showing your Main Menu.

  • Duplicate this module and open the copy.

  • Leave everything as it is but set Position > offcanvas

  • Make sure to set Status > Published.

  • Click "Save & Close" in the toolbar.

The "small" logo:

  • Switch the default editor to CodeMirror:
    Site > Global Configuration > Site > Site Settings > Default Editor > Editor - CodeMirror

    This is important because WYSIWYG editors in Joomla have a tendency to silently alter and "correct" the source when you save.

  • Go to Extensions > Module Manager and look for the module in "logo".

  • Duplicate this module and open the copy.

  • Set Position > logo-small

  • Make sure to set Status > Published.

  • Adapt the content to show the image or content you want to see as a logo at lower resolutions. In most cases the class uk-responsive-height is recommended, as in for instance

    <img src="images/logo.png" width="70" height="30" alt="Logo" class="uk-responsive-height">  
    

    Mind: No wrapping elements, no span, no p, no div, certainly not an a element (the position is linked by default)!

  • Click "Save & Close" in the toolbar.


WORDPRESS

The "offcanvas" menu:

  • Go to Appearance > Widgets

  • Drag a new widget of the type "Menu" to the position named "offcanvas".

  • Set it to use your main menu.

  • Save the changes.

The "small" logo:

  • Go to Appearance > Widgets

  • Drag a new widget of the type "Text" to the position "logo-small".

  • Enter the desired content you want to get as a logo for lower resolutions, usually an image. In most cases the class uk-responsive-height is recommended, as in for instance

    <img src="wp-content/uploads/logo.png" width="70" height="30" alt="Logo" class="uk-responsive-height">
    
  • Save the changes.


Reload the page in the frontend and resize the browser window or look at it on a mobile device. The menu "toggler" for "mobile" resolutions is an icon showing three horiontal bars. If the visitor clicks on this icon a menu will be opened on the left.

Image

The above screenshots show the principle for the "desktop"/"large" resolution at the top, below that the "medium"/"small" resolution view with the toggler and the logo, below that you see the opened "offcanvas" menu as it would be used on a smarthpone or tablet.

  • Joomla
  • WordPress
  • Tutorial

9 Answers

0

Avatar lydia.jordane answered

Hi, thanks for this easy to follow tutorial! Unfortunately I have followed all the steps as described, and those 2 functions are still broken on my site. I am using Sixth Avenue for Joomla. I am using the latest warp and template and Joomla version. My unanswered question is below:

http://yootheme.com/support/question/96147#answer-286132

Do you know what might be causing this? Thank you!

0

Avatar onkel.otto answered

Hello Michael,
thanks a lot for that helpfully tutorial. I looked exactly after this answers.
Kind regards
Otto

0

Avatar raul.r.rios answered

Thanks Michael - great tutorial and helps me get a better feel for the Uniq Yootheme environment.

Raul

Know someone who can answer? Share a link to this question via email or twitter.