TapTap: A Super Customizable WordPress Mobile Menu

An easy-to-customize, mobile-first, off-canvas menu plugin for WordPress that would be versatile enough to be used on literally any site.

Be it a creative’s portfolio or a corporate site, mixing and matching fonts, font sizes, icons, letter spacing, colors, button and logo positions, backgrounds, alignments, animation speeds etc. allow you to quickly create a menu that’s uniquely yours. As of version 3.0, you can even preview any changes you make in real-time, making customizing your mobile menu faster and easier than ever.

As can be seen from the examples above, you can easily create results that look and feel vastly different from one another. Forget pre-determined layouts and build the mobile menu you want.

Hordes of customers have chosen TapTap as their go-to mobile navigation plugin; we believe that speaks volumes about the quality on offer and the amount of work we put into keeping our customers happy, which can be witnessed from TapTap’s reviews. Even Envato calls TapTap “a worthy addition to any website” and “a highly recommended and really useful plugin!”

TapTap full features list:

TapTap is wildly customizable and by far the most versatile WordPress mobile menu available anywhere. To get acquainted with everything you can edit, add and customize, please have a look at the full details on TapTap’s near-endless possibilities below:

Menu Button

Position menu button left or right, then fine-tune top/side distance with per-pixel accuracy
6 different menu button styles
- Each style has regular and thin variations (12 designs total)
- Each button has two different animations (or no animation at all)
- Set custom animation speed
- Set button opacity
- Customize color, hover color (+ colors when menu active)
Add label to menu button
- Enter custom label text
- Position label anywhere around the button with per-pixel accuracy
- Set custom font size
- Set custom letter spacing
- Select label font (12 options available, or use a theme font)
- If menu button is hidden, label will remain visible (if one is entered) and can be used to activate the menu
- Customize label color, hover color
Optionally hide menu button (useful if you’d like to use a custom element to activate the menu)

Logo Placement

Position logo left, center or right, then fine-tune top/side distance with per-pixel accuracy
If logo entered as text:
- Set custom font size
- Set custom letter spacing
- Select logo font (12 options available, or use a theme font)
- Customize color, hover color
If logo entered as an image:
- Set custom logo image size
Optionally hide logo placement

Search Button

Position search button left or right, then fine-tune top/side distance with per-pixel accuracy
Regular and thin search button variations
Optionally flip search button for additional variations
Customize color, hover color
Add label to search button
- Enter custom label text
- Position label anywhere around the button with per-pixel accuracy
- Set custom font size
- Set custom letter spacing
- Select label font (12 options available, or use a theme font)
- If search button is hidden, label will remain visible (if one is entered) and can be used to activate the search function
- Customize label color, hover color
Optionally hide search button (and the function along with it)

Search Function

Set custom appearance animation speed
Seach field:
- Set custom searchfield placeholder text
- Customize search field height
- For RTL support, align searchfield text to the right
- Hide ‘clear field’ option
- Set custom font size
- Set custom letter spacing
- Select label font (12 options available, or use a theme font)
- Change search field background opacity
- Customize colors of search field background, placeholder and search text, close and ‘clear field’ buttons
Set background overlay opacity and color

Header

Show/hide header
Set custom header height
Change header background color
Change header background opacity
Show/hide header background shadow (+ set shadow strength)

Menu Container, Menu, Widgets etc.

General:
- Display menu fly-out as full-screen or set custom width/height
  - Height is applicable when menu is set to animate from top/bottom.
  - Width is applicable when menu is set to animate from left/right.
- Set menu to appear by fading in or sliding from left, right, top or bottom
- Set custom menu appearance speed
- Optionally show submenu when current (have menus open when on current menu item)
- Optionally close menu after clicking on menu item (useful on one-page websites)
- Align menu contents left/center/right and top/middle/bottom
- Give content inside the menu container maximum width
- Alter menu contents’ scaling animation (any scaling level, positive or negative, or disable altogether).
- Set custom left, right, top and bottom padding menu container
- If on desktop, pressing the ESC button closes the menu and search
- Change menu background overlay color and opacity
Background:
- Add background image or pattern
- Change background image positioning
- Change background image opacity
- Change background color
- Change background color opacity
- Create animated, pulsating color backgrounds (+ change animation speed)
Add heading, subheading texts:
- Change fonts (12 options available, or use a theme font)
- Change font sizes
- Change letter spacings
- Change line heights
- Turn heading texts into links
Add heading image:
- Set maximum size
- Turn heading image into a link
- Set top and bottom margins
Accordion menu:
- Build a multi-level menu (no depth limit)
- Add descriptions to single-level menu items
- Set vertical spacing between menu items and menu descriptions
- Change fonts (12 options available, or use a theme font)
- Change font sizes
- Change letter spacings
- Change line heights
- Change all colors
- All font options can be set individually for top-level and sublevel items as well as menu descriptions
- Add icons to menu items:
  - 600+ icons available
  - Change icon size (separately for top-level and submenu items)
  - Change icon color (separately for top-level and submenu items)
Customizable styled scrollbar:
- Customize scrollbar colors
- Customize scrollbar thickness
- Customize scrollbar distance from the sides
- Customize scrollbar corner roundness
- Show the scrollbar always or only on mouseover
- If styled scrollbar is enabled, it will be displayed on desktop only. On mobile, the device’s native scroll behavior is used.
Content animation effects (applied to selected content when menu opens/closes):
- Scaling
- Opacity
- Blur
Widget location:
- Text widget accepts shortcodes
- Select fonts (12 options available, or use a theme font)
- Set custom font sizes
- Set custom letter spacing
- Set custom line heights
- Change colors (titles, content, links)
- Set font settings individually for widget titles and content

Misc

TapTap uses the built-in WordPress customization tools and menu builder. This means the plugin is lightweight and allows you to use tools you’re already familiar with (no need to learn a new interface!).
Show/hide at specified resolutions (show on mobile and hide on desktop, or vice versa)
Hide completely at specified posts/pages
‘Smart header’ option (header elements slide out of view when site scrolled down, slide back into view when scrolled up).
Hide theme menu, logo etc. when TapTap is active, by the class/ID of the theme elements
Optionally lock body scroll when menu opened
A dozen carefully selected font variations included (or use your theme fonts)
Open submenus from arrow indicator or full top-level menu item
Optionally have TapTap open by default on the front page
Toggle the menu via a custom element, via an activator class
RTL support
WordPress multisite compatible
Absolute/fixed positioning
Have the logo, search and header appear above or below menu
Optionally don’t load FontAwesome icon set (useful if you don’t use icons in your menu or if something in your installation already loads this widely used icon set)
Optionally disable retina support (in case you don’t make use of the image possibilities in the plugin)