Mobile Menu Customizer

1. Installing Mobile Customizer

Just install Mobile Customizer as a plugin either through your WordPress Dashboard plugin area (as a zip file) or in the files of your site in the plugins folder (as an unzipped folder).

To use Mobile Customizer make sure it is activated in your plugin area (Dashboard > Plugins).

2. Finding the Mobile Customizer options

Mobile Customizer options can now be found in the WordPress Customizer (Appearance > Customizer).

Screenshot 2015-01-20 15.36.13

All the options are under the section that says Mobile Menu.

Screenshot 2015-01-20 15.34.01

3. Using the Mobile Menu Customizer options

There are four main option sections under Mobile Menu:

Screenshot 2015-01-20 15.43.26

  • Mobile nav bar – this gives options for customizing the nav bar that can be seen before the mobile menu is expanded. This includes, color, padding, icons (see how to use Font Awesome Icons below), adding your own logo, changing the nav bar title and font styling.
  • Mobile menu panel – this gives options for customizing the mobile menu panel (the state after the mobile menu is expanded). This includes adding a logo, phone number, color, font and icon styling.
  • Misc Mobile Options – some other options to give more control over your site

Screenshot 2015-01-20 15.55.18

  • Utilities – give you the option to reset your mobile menu. Please be aware there is no undo feature, so use this with care!

4. Using live preview in WordPress Customizer

You will find it most useful to shrink the size of your screen so that you can see the Canvas mobile menu appear (less than 768px wide). This way you can see the live preview of mobile menu you are customizing.

If you can’t see the mobile menu under 768px then you probably have the responsive setting in Canvas turned off (go to Canvas > Settings > Layout > Enable Fixed Mobile Layout and make sure this setting is off)

5. Using Font Awesome Icons

The icons used in Canvas are from the Font Awesome icon library. The classes take the format ‘fa-classname’. So for example a home icon class is called ‘fa-home’. To find out all the classes you can use this reference: http://fortawesome.github.io/Font-Awesome/icons/

Please note: at this time not all the icons from the Font Awesome library work as Canvas does not use the most up to date version. So you may find a small number (very few) that do not work.

 

2 thoughts on “Mobile Menu Customizer”

Leave a Reply

Your email address will not be published. Required fields are marked *