CodeCanyon TapTap - WordPress Plugin

CodeCanyon TapTap Setup Guide for WordPress Mobile Navigation

CodeCanyon TapTap is not just a way to "add a hamburger icon" to your site. It is a WordPress plugin that helps you build a separate mobile navigation layer: the open button, header, search, WooCommerce cart, multi-level menu, background, animation, widgets, and display rules. In this guide, we will look at how to configure it deliberately: what to check before installation, which settings to enable first, how to avoid conflicts with your theme, and how to tell whether the menu is actually convenient for visitors.

This article is written for a site owner, webmaster, or developer who already has the plugin ZIP file and wants to deploy it safely on a live WordPress site. We will not repeat the product sales copy or cover purchasing, license keys, or payment. Instead, we will go from preparing the menu structure to testing the result on a phone, tablet, desktop, in site search, and in WooCommerce scenarios.

The main setup principle is simple: first define the purpose of the menu, then build the structure, and only after that configure behavior, appearance, and exceptions. If you start with colors and animations, it is easy to end up with a beautiful panel that covers the header, duplicates the theme menu, interferes with scrolling, or does not actually help users reach the section they need.

This article includes a practical example for a service-based site, a separate section on the button and header, a breakdown of search and the WooCommerce cart, troubleshooting rules, similar solutions, and an FAQ. The images in this guide are instructional and illustrative: they help explain the relationship between settings and results, but they are not exact copies of a specific admin panel.

What Problem TapTap Solves on a WordPress Site

TapTap belongs to the category of mobile and responsive menus. Its purpose is to give your site a separate, manageable navigation layer that you can enable at specific screen widths, display over or alongside the content, decorate with icons, extend with search, widgets, and, when needed, a WooCommerce cart. This matters for sites where the theme's default menu is too basic, awkward on phones, or does not allow a separate experience for mobile visitors.

A typical example: the desktop version of a site uses a wide header with a logo, main menu, phone number, and a request-a-quote button. On a phone, that header turns into a crowded stack of elements, and some links end up buried behind extra taps. TapTap lets you build a separate mobile header: a menu button on the left, a logo in the center, and search or a cart on the right. The menu itself can open from the side you choose, take over the full screen or a fixed width, and display items with icons, descriptions, and nested levels.

The official product page confirms that the plugin is built around a mobile-first off-canvas menu and includes settings for the button, logo, search, header, menu container, widget areas, backgrounds, animations, horizontal menu, and an experimental image-based menu. That is why TapTap's strength is not one single feature, but the number of details you can control. The plugin is useful when a site owner does not want to depend on the theme's mobile menu and is willing to spend time configuring things carefully.

Where TapTap Makes the Most Sense

The plugin works especially well on sites where mobile navigation should feel like part of the brand and the user journey, not like a technical afterthought. For a portfolio, careful spacing, typography, animation, and large links to projects matter. For a corporate site, quick access to services, contact details, careers, case studies, and the contact form is more important. For a small store, the priority is the cart, search, categories, promotions, and links to the customer account area if that structure exists on the site.

TapTap also fits one-page sites where menu items lead to sections on the same page. In that case, the setting that closes the menu after a click becomes especially useful: the visitor taps "Contact", the panel closes, and the screen immediately shows the right section. If the menu stays open, the user may think the jump did not work, especially on a smaller screen.

When the Plugin May Be Unnecessary

TapTap may be excessive for a site where the theme already provides a solid mobile menu and the navigation only has three items. In that case, an extra plugin just adds settings, styles, and scripts that still need maintenance. It may also be the wrong choice for a project that requires strict code minimalism, a fully custom header build, or unified components inside a design system.

There is another risk as well: the more styling options you have, the higher the chance that an admin will enable incompatible effects at the same time. For example, blur the page content, add background video, turn on complex animations, and lock scrolling all at once. On a powerful desktop, that may look impressive, but on a lower-end phone the menu will feel heavy. That is why this guide focuses not on "turn everything on," but on "turn on what actually improves navigation."

What to Check Before Installation and First Launch

Before installing any navigation plugin, it is important to understand what it will interact with. TapTap does not exist separately from the theme: it appears over the public-facing site, uses WordPress menus, can hide theme elements by CSS class or ID, and adds buttons, styles, and scroll behavior. Without preparation, the first activation can create duplicate navigation: the theme's old menu stays on screen, and a new TapTap button appears on top of it.

Start with a backup and a staging site. WordPress.org plugin documentation explicitly recommends keeping a current backup before updates and checking compatibility. That matters even more with TapTap because the menu sits in one of the most visible areas of the site. A color or spacing mistake will not destroy data, but it can immediately damage access to key pages on mobile.

Preparation Checklist

• Check the theme. Open the site on a phone and see what menu the theme already shows, where the logo sits, whether the header is fixed, and which elements should be hidden after enabling TapTap.
• Prepare the WordPress menu structure. TapTap should display a clear hierarchy: main sections, nested pages, categories, contact links, and any custom links you actually need.
• Decide what belongs in the mobile header. Do not place the logo, menu button, search, cart, phone number, social links, and a banner all at once if the screen is small. The header should have one primary job.
• Check caching and optimization. If the site uses minification, JavaScript combining, delayed scripts, or critical CSS, you will need to verify after setup that those mechanisms are not breaking the menu panel.
• Evaluate the WooCommerce scenario. If the site has a store, decide whether you actually need a mobile cart in the header. If it does not, do not enable store-related elements just for appearance.

Why Menu Structure Matters More Than Button Color

TapTap can decorate menu items with icons and change sizes, fonts, spacing, and colors. But none of that rescues a menu whose top level is overloaded. On a phone, users are not studying the entire site map. They are looking for the shortest path to an action. On a service site, that usually means "Services", "Pricing", "Case Studies", "About Us", and "Contact". For a store, it means "Catalog", "Deals", "Shipping", "Payment", "Cart", and "Help". For a blog, it means categories, collections, search, and a subscription option if one exists.

If the site has twenty top-level items, group them inside the WordPress menu first. TapTap supports multi-level structure, but that does not mean your mobile panel should become a full archive of the entire site. A good mobile menu usually leads to the most important decisions instead of duplicating every link from the footer.

Pre-installation check: if you cannot explain why each item needs to appear on a mobile screen, that item probably belongs in a submenu, the footer, an "All Services" page, or search.

Installation Through the Admin Panel and the First Basic Test

TapTap is distributed as a commercial WordPress ZIP plugin. The installation flow is the same as for other ZIP-based plugins: open Plugins, go to Add New, choose the archive upload option, install it, and activate it. If your WordPress admin is localized, the labels may appear differently, but the logic is the same: install from the admin panel, then start testing from the list of installed plugins.

Do not try to achieve the final design on the first step. Right after activation, the real priority is to confirm that the plugin appears in the admin area, does not trigger a fatal error, does not conflict with the theme on the front end, and can open a basic menu. Only after that is it worth moving into detailed configuration.

A Safe First-Launch Order

1. Create a site backup or confirm that your hosting platform recently created one with its standard backup tool.
2. Install the ZIP file through Plugins -> Add New -> Upload Plugin.
3. Activate the plugin and open Installed Plugins to confirm that TapTap is enabled.
4. Go to the plugin settings or to Appearance -> Customize if your version exposes its settings through the Customizer.
5. Assign a test menu and save a minimal set of parameters.
6. Open the site in Incognito mode and on a real mobile device, not only in the browser preview.

What to Check Immediately After Activation

The first test should stay simple. Open the homepage, several inner pages, a blog post, a category page, and, if WooCommerce is present, a product page and the cart. Tap the menu button, open submenus, close the panel, and try scrolling the page. If TapTap is not supposed to appear on desktop, verify the screen-width rule. If it should appear on all devices, make sure it is not duplicating the theme menu.

Pay special attention to fixed theme elements: sticky headers, chat buttons, back-to-top buttons, cookie consent bars, floating phone buttons, and messenger widgets. They may sit above TapTap because of z-index or cover the open button. The official product page itself mentions settings for position, spacing, and hiding theme elements by class or ID, so conflicts with an existing header should be treated as a normal configuration task, not as an unexpected failure.

The Core Setup Logic: From the WordPress Menu to the Visible Panel

TapTap works best when you think of it as a presentation layer on top of a normal WordPress menu structure. First, you have a menu inside WordPress. Then the plugin decides how to display it: as a vertical panel, a full-screen menu, a horizontal mode, an image-based menu, or a combination of several elements. That logic helps you keep content and appearance separate.

If a menu item is in the wrong place, first check the structure in Appearance -> Menus or the equivalent section provided by your theme. If the item exists but looks wrong, then move to TapTap settings: font, size, line height, spacing, color, icon, description, and submenu behavior. If an item should not appear on mobile at all, it is better to remove it from the mobile menu or move it to a different level than to hide it with color tricks or CSS.

Menu Content

For TapTap, it is important to choose the menu source in advance. The standard WordPress approach is to build a menu from pages, posts, categories, and custom links, then assign it to the proper location. The plugin adds its own visual shell, but it does not replace the basics: item labels should be short, nesting should be clear, and links should work.

If the site uses multiple languages, multiple user roles, or different menus for different sections, do not rely on assumptions. Check how the selected menu behaves with your multilingual plugin, caching setup, and pages where the structure changes. The official TapTap page mentions RTL and multisite support, but actual behavior with a specific multilingual or caching extension is still something you should test on your own installation.

The Panel Appearance

Once the structure is in place, move on to the menu container. TapTap includes parameters for slide-out panel width and height, opening direction, animation speed, content alignment, inner spacing, maximum content width, background color, transparency, image, pattern, rounded corners, and distance from the screen edge. That gives you a lot of freedom, but it also requires restraint.

For a typical service-based site, a safe starting point looks like this: the panel opens from the left or right, takes up most of the screen on a phone, uses generous spacing, has a high-contrast background, large text, and a moderate animation speed. Full-screen mode works well when the menu is the main navigation method. A narrow panel is useful when visitors should still see part of the page behind it, but it is less suitable for long item labels and nested levels.

Submenu Behavior

TapTap advertises a multi-level accordion menu and the option to open submenus either by the arrow or by the entire top-level item. Here, the important thing is choosing a model users will understand. If the top-level item leads to an important page, do not make the whole item only expand the submenu, because the visitor may never reach the category page. If the top-level item is just a group label, opening by clicking the whole item will be more convenient.

Check the current menu item behavior as well. TapTap has an option to keep a submenu open when it relates to the current page. That helps on sites with deep structure because the visitor can see where they are. But if the menu is large, automatic expansion can make the panel too long. In that case, it is better to open only one branch and make sure the current item stands out by color, background, or another clear marker, not only by a slight shade difference.

The Menu Button, Logo, and Mobile Header

The open button is the most visible TapTap element. The official product page lists left and right positions, fine-grained spacing controls, multiple button styles, animation options, speed, transparency, color, hover and active-state colors, and a text label next to the button. This is not a decorative detail: if the button is too small, blends into the background, or appears on top of the theme logo, visitors simply will not open the menu.

Start with a large, obvious button. Do not place it too close to the edge of the screen: on modern phones, system gestures and bulky phone cases can interfere with precise taps. In its menu accessibility materials, the W3C emphasizes that people using touchscreens and people with motor impairments need adequately sized tap targets. That does not mean the button must be huge, but it does need a clear interactive area.

Button Position

The choice between left and right depends on the existing header. If the logo is already on the left, it is often more practical to place the button on the right. If the right side already holds the cart or search, the button can go on the left. The key is not to duplicate familiar roles. Users should understand within a second: this is the menu button, this is search, this is the cart, and this is the logo.

Fine-tune spacing only after testing at several widths. Everything may look aligned in the Customizer, but on a real device the button can end up next to a screen cutout, browser chrome, or a floating chat button. If TapTap uses fixed positioning, do not test only the top of the homepage. Also check the state after scrolling.

Button Label

TapTap lets you add a text label to the button and, according to the product description, keep that label visible even when the button itself is hidden so the label can still trigger the menu. That is useful if the site's audience responds better to the word "Menu" than to a symbol alone. A label also helps when the button design is unconventional.

But the label should stay short. For an English-language site, "Menu" is usually enough. Do not use long phrases such as "Open Site Navigation": they break the header and are harder to scan. If you need accessibility support for assistive technologies, it is better to verify the button markup and behavior directly than to try solving everything with a visible text string.

The Logo in the TapTap Header

The plugin supports placing the logo on the left, center, or right, and it accepts both text and image logos. That is convenient for branding: the mobile header can feel like a natural part of the site instead of a foreign block. But do not insert a large logo if it takes space away from the menu button and search. On phones, a compact symbol or a short text logo usually works better.

If the site already has a theme logo, decide which layer is primary. Sometimes it is enough to hide the theme logo when TapTap is active and show the plugin's own logo. Sometimes the opposite is better: keep the theme header and use TapTap only as the button and slide-out panel. The official product page mentions the ability to hide the theme menu, logo, and other elements by class or ID, so this scenario is supported, but it requires careful selector choices.

Smart Header and Scrolling

The Smart header feature is described as behavior where header elements hide while the user scrolls down and return when the user scrolls up. This can improve the mobile experience: the visitor reads the page without a constant bar in view, but can quickly get the menu back with a reverse scroll. However, that setting should be tested on long pages, product pages, forms, and pages with anchor links.

If the site has a fixed cookie bar, a chat button, or a bottom store toolbar, the "smart" header can end up competing with them. In that case, it is often better to keep a predictable fixed menu button or enable the smart header only after testing on a real device.

Search, the WooCommerce Cart, and Extra Header Elements

TapTap is interesting because it does more than display a list of links. The official product page describes a separate search button, search field settings, background overlay, placeholder text, field height, RTL alignment, clear button, colors, and entry animation. For WooCommerce, it includes a cart button with positioning options, basket and bag icon variants, colors, and hover states.

You should enable those functions only if they genuinely support the site's user journey. On a corporate site, search may be important for a knowledge base, service catalog, or blog. On a small landing page with very little content, search is more likely to distract. In a store, the cart in the mobile header is almost always useful, but only if WooCommerce is already configured and users can actually add products.

How to Configure Search Without Overloading the Interface

Three things matter for search: the button should be recognizable, the field should open quickly, and the results should lead to the standard WordPress search page or to whatever search system already works on the site. Do not make the search button look identical to the menu button. The icon, label, position, and color should help users distinguish the actions.

If TapTap lets you set placeholder text, keep it short: "Search the site" or "Find a service". For a store, "Find a product" works better. Do not promise something in the placeholder that the search cannot actually do. If the site uses a dedicated product search, verify what TapTap is triggering: the standard WordPress search or a specialized search system provided by the theme or the store.

Testing the Search Scenario

1. Open the menu or the search button on a mobile device.
2. Enter a word that you know definitely exists on the site.
3. Make sure the field is not covered by the keyboard and that the close button remains accessible.
4. Submit the query and confirm that the results page is styled correctly by the theme.
5. Clear the field, close search, and verify that page scrolling returns to normal.

The WooCommerce Cart in TapTap

The cart in the mobile header can help a store, but it needs careful testing. If the cart appears next to the menu button, visitors need to understand that it is a separate action. The cart or bag icon should use a contrasting color, but it should not become more visually aggressive than the main call-to-action on the product page. If the site already has a floating cart from the theme, do not show two versions of the same element.

Test not only how the icon looks, but also whether the product count updates correctly. Add a product on a product page, return to the homepage, open the menu, check the cart state, go to the cart, and then go back. If the site uses page caching, the dynamic cart may display stale information. In that situation, check your caching plugin settings and WooCommerce exclusions first instead of changing TapTap colors.

Widgets Above and Below the Menu

TapTap advertises widget areas above and below the menu, and its text widget accepts shortcodes. That is a powerful feature for sites where navigation should include more than links: a phone number, a short call to action, business hours, a booking button, a signup form, social links, or a small banner. But widgets can easily overload a mobile panel, so add them only after the core menu structure is working well.

A good pattern is one short widget above the menu with a contact action, or one small block below the menu with social links. A bad pattern is long text, multiple buttons, a form, a map, and a banner inside the same panel. When users open a menu, they want to move forward, not read a second page inside the panel.

Animations, Backgrounds, Panel Width, and Visual Identity

The official TapTap page lists many visual parameters: opening speed, fade or slide effects, directions from the left, right, top, or bottom, background image or pattern, color and transparency, pulsing or gradient backgrounds, rounded corners, edge spacing, content scaling, blur, opacity, and page content movement when the menu opens. That makes the plugin flexible, but it also creates a real risk of overdesign.

Configure the visual layer as a system. A menu has three layers: the trigger, the panel, and the page content underneath the panel. If all three move, blur, and change opacity at the same time, users can lose orientation. It is better to choose one primary effect: for example, the panel slides in from the right, the background dims slightly, and the page content stays calm. Or the panel appears full-screen with a gentle fade while the page underneath does not animate at all.

Container Width and Height

TapTap lets you make the menu full-screen or define custom dimensions. For a mobile site, two modes are usually the most practical. The first is a full-screen menu: good for branding, short labels, large typography, and a visually strong header. The second is a wide side panel: useful when you want to preserve a sense of connection to the page instead of covering the content completely.

A panel that is too narrow is risky when your menu labels are long. If an item wraps to two lines, that is normal. If every item turns into a cramped three-line column, increase the panel width or shorten the labels.

Background Image and Video

The TapTap changelog mentions a menu background video option. Background images and video can look striking, but they should be used carefully. Navigation must remain readable on top of the background, and mobile connections or lower-powered devices should not have to pay the price for a decorative effect. If you add a background, check item contrast, opening speed, and behavior on a phone with data-saving features enabled.

For most sites, a solid color background, a light gradient, or a translucent layer is enough. Save background video for projects where visual presentation truly matters: a creative agency, a portfolio, an event site, or a promotional landing page. For a store, documentation site, or medical clinic, stability and readability are usually more important.

Page Content Animation

TapTap can apply scaling, movement, opacity, and blur to selected page content when the menu opens. This is not just decoration: the effect can help communicate that the menu is the top layer and the page has temporarily moved into the background. But these effects also interact with theme CSS, fixed elements, page builder animations, and performance optimization.

If you enable blur or movement for the page content, test the homepage, a long article, a form, a product page, the cart, and a page with an embedded map or video. If the background starts flickering anywhere, the content jumps, or horizontal scrolling appears, disable the effect for that layer and keep only the panel animation itself. Navigation should be more predictable than the animation is impressive.

Icons, Item Descriptions, Horizontal Mode, and the Image-Based Menu

TapTap stands out from many simple mobile menus because it gives you several ways to present the menu structure. In the vertical accordion menu, you can use icons, item descriptions, and separate settings for top-level and nested items. The horizontal menu has its own settings for section headings, font sizes, icon sizes, and colors. The experimental image-based menu can replace the main menu or complement it, supports up to nine top-level items, and allows unlimited submenus.

These modes serve different purposes. Do not enable all of them at once without a reason. If visitors mainly need fast navigation through services, a standard accordion menu will be clearer. If the site sells visual categories such as travel types, courses, or collections, an image-based menu may communicate meaning faster. If you need to display a compact set of frequently used actions, the horizontal mode may work better than a long vertical panel.

Icons in Menu Items

Icons help when they reinforce the meaning of an item: a home for the homepage, a bag for the store, a magnifying glass for search, an envelope for contact. The official product page mentions 600+ icons and separate size and color settings for different menu levels. Use that advantage in moderation. If every item gets a random icon, the menu starts looking noisy rather than clearer.

For the top level, choose five to seven icons that genuinely improve scanning. Submenus usually work well with text alone. If you use Font Awesome or Line Awesome, keep the TapTap changelog in mind: in one update, the developer noted a change in the way Font Awesome v6 icons are entered and recommended checking the documentation. So after an update, do not be surprised if older icon classes need review.

Item Descriptions

TapTap supports descriptions for single-level menu items and includes controls for the vertical spacing between items and their descriptions. That is useful when top-level items are not self-explanatory. For example, "Support" can be extended with a short line like "Guides, warranty, and contact". But descriptions quickly increase the height of the panel. In a mobile menu, use them selectively on main sections where the extra explanation genuinely reduces the chance of a wrong choice.

When to Use the Image-Based Menu

The image-based menu works best not for a normal list of pages, but for cases where a visual card helps users make a decision. For example, a restaurant could show "Breakfast", "Delivery", "Private Events", and "Daily Specials"; a school could show "Courses", "Instructors", "Schedule", and "Reviews"; a store could show "New Arrivals", "Sale", "Categories", and "Gifts". But that format requires strong images, short captions, and careful file weight control.

If the images are heavy or unrelated to the menu items, the menu becomes slower and less useful. Start with a regular vertical menu, then add an image-based block only for three to six genuinely visual directions. Do not turn it into a copy of the catalog with dozens of cards. For a full catalog, a separate page or product filters are usually better.

Usage Scenarios for Different Types of Sites

The same TapTap settings should not automatically carry over from a service site to a store, blog, or portfolio. The product offers many features, but a useful configuration depends on why the visitor opens the menu. If the user came to buy a product, they care about the catalog, search, cart, and shipping. If they are choosing a service provider, they care about services, case studies, reviews, and contact details. If they are reading a magazine or knowledge hub, the menu should help them find categories and recent content rather than turning into a promotional banner.

That is why it helps to define one primary mobile scenario before finalizing the setup. Not in design terms, but in action terms: "the visitor should reach the right service within two taps", "the shopper should find a category and get to the cart", "the reader should quickly reach a category and site search", "the customer should immediately see contact info and a booking button". After that, choose the specific TapTap elements: button, search, cart, widget, image-based block, close-on-click behavior, display rules, and page exclusions.

Service Site: the Shortest Path to an Inquiry

On a service site, the mobile menu should quickly explain what the company does and where the user should go next. The top level works best when built around user decisions: "Services", "Pricing", "Case Studies", "Reviews", and "Contact". If there are many services, do not put every one of them at the top level. Group them into a nested section and add an "All Services" item so the user can still reach an overview page.

For this kind of site, TapTap features that are especially useful include the button label, a clean logo, a widget below the menu with a contact action, and closing the panel after clicking an anchor link. Search makes sense if the site contains a lot of content, a knowledge base, or detailed service descriptions. The WooCommerce cart is unnecessary if there is no store. The image-based menu can work for three or four key service directions if the images genuinely help users understand the differences.

How to Test the Service Scenario

Open the site on a phone and give yourself a task: find a service, understand the general price level, or get to contact information. If doing that requires expanding three levels, reading long labels, and closing extra blocks, the menu is overloaded. Remove secondary items, shorten labels, keep the contact action at the bottom of the panel, and test the path again.

Online Store: Categories, Search, and Cart

For a store, TapTap should support the shopping journey. The core elements are the catalog or categories, search, deals, shipping, payment, contact information, and the cart. If you enable the WooCommerce button, do not duplicate it with the theme's cart button. If TapTap search leads to the general WordPress search but shoppers expect product search, verify the outcome in advance. Sometimes it is better to keep the store's native search than to show a nicer-looking but less accurate search form.

The image-based menu can help with visual categories such as clothing, shoes, accessories, gifts, or collections. But it comes with a cost: the images have to be selected, optimized, and checked for caption contrast. If the catalog is large, the mobile panel should not try to replace a proper catalog page with filters. Its job is to provide a quick entry point into the main sections.

What Not to Do in a Store

Do not overload the menu with promotions, banners, and widgets. Shoppers open the mobile menu to find a path, not to read a second homepage. Do not hide the cart behind several levels. Do not enable heavy effects on product pages if they make the "Add to Cart" and "Checkout" interactions feel slower.

Blog, Magazine, or Knowledge Base: Categories and Search Matter More Than Effects

On a content-heavy site, the mobile menu should help users orient themselves by topic. In that context, search and categories are often more useful than elaborate animation. The top level can be built from key sections, curated collections, an "About" page, contact information, and a subscription option. A widget below the menu can lead to the newsletter or a page with popular articles, but it should not take up half the screen.

For a blog, the current section state matters a lot. If a visitor is reading an article inside a category, the menu should help indicate where they are. TapTap lets you configure current submenu behavior and item styling, so use a highlight for the active branch. At the same time, do not expand the entire category archive if there are dozens of categories. It is usually better to show five to eight main directions and a link to an all-categories page.

Portfolio and Creative Site: Visual Style Without Losing Navigation

A portfolio is one of the scenarios where TapTap can look especially strong. A background image, subtle animation, a large logo, a distinctive font, and an image-based menu can all support the brand. But even here, the menu is still navigation. If visitors cannot quickly reach projects, services, team information, and contact details, an impressive background does not solve the problem.

For a creative site, a full-screen menu with bold typography, a small number of items, and one visual accent often works well. Icons should be used selectively rather than next to every item. If you add background video, make sure the labels remain readable in every frame and that the menu opens without delay on a mobile connection.

One-Page Site: Close-on-Click Must Be Tested

On a landing page, many menu items lead to anchors within the same page: services, process, reviews, FAQ, and contact. In that scenario, the close-after-click setting becomes especially important. If the panel stays open, visitors do not see the jump to the desired section and may tap again. If the menu closes, the result of the action is immediately visible.

Test every anchor after enabling caching and optimization. Some page builders add their own smooth-scrolling behavior, and some caching plugins change script order. If an anchor link stops working, temporarily disable the theme's or builder's smooth scroll and identify the conflict. Do not add a second smooth-scrolling script on top of an existing one unless you actually need it.

Practical Example: a Mobile Menu for a Service-Based Site

Imagine a renovation studio, agency, law firm, or small clinic website. The desktop header includes a logo, menu, phone number, and inquiry button. On mobile, the theme's standard menu takes up too much space, and visitors are more likely to look for services, pricing, work examples, and contact information. The goal is to build a compact mobile navigation in TapTap that opens from the right, shows key sections, provides quick site search, and closes after moving to an anchor on the homepage.

Goal

The target is a clear mobile header: logo on the left, a "Menu" button on the right, five main items inside the panel, a nested list of services, a contact action below the menu, and a visible highlight for the current section. The menu should appear on mobile widths, should not duplicate the theme header, and should not interfere with page scrolling.

Preparation

First, create or edit the WordPress menu. Top level:

• Services.
• Pricing.
• Case Studies.
• About Us.
• Contact.

Inside "Services", add four to six primary directions. If there are more, create an "All Services" page and do not expose the full catalog inside the mobile panel. For contact, prepare a page with a phone number, address, form, and map. If the homepage contains anchor sections, make sure the links use the correct format, such as #prices or #contacts.

Setup Steps

1. Assign the prepared menu as the source for TapTap.
2. Select a right-side button and add a short "Menu" label if a hamburger icon alone is not obvious enough for the audience.
3. Place the logo on the left or in the center of the header, but do not use an overly wide image.
4. For the panel, choose right-side opening, a width that works well for longer labels, and a high-contrast background.
5. Enable menu close after clicking an item if the links lead to anchors on the same page.
6. Configure the current item state and expansion of the active submenu if the visitor is inside the services section.
7. Add a widget below the menu: a phone number, a short line such as "We reply during business hours", or a link to the contact page.
8. If the theme continues to show its old mobile menu, use the option to hide theme elements by class or ID after identifying the exact selector in the browser's developer tools.

Result Validation

Open the homepage on a phone. The button should be visible immediately, the menu should open without jerking, the "Services" submenu should expand predictably, and the "Contact" item should lead to the correct section or page. After clicking an anchor link, the panel should close. Otherwise, the user will only see the menu and may not realize the jump happened.

Then test an inner service page. The active branch should help the visitor understand where they are. If the active submenu opens into an overly long list, it is better to simplify the top-level structure or turn off automatic expansion.

A Detail People Often Miss

If the theme has its own sticky header, it may appear over TapTap after scrolling. In that case, do not start by increasing z-index with random CSS. First check whether TapTap can hide theme elements when its menu is active. If that is not enough, add a small CSS adjustment in Appearance -> Customize -> Additional CSS or in a child theme. Use only selectors that specifically match your theme.

Testing the Result on Mobile, Tablet, Desktop, and the Cached Version

TapTap validation should go beyond "the button opened". A mobile menu affects navigation, scrolling, header visibility, search, cart behavior, accessibility, and caching. So after configuration, run a control path like a normal visitor: arrive on the homepage, open the menu, go to a service, return, use search, add a product to the cart if the site has a store, close the panel, rotate the phone, then open the site on a tablet.

The WordPress Customizer offers device previews, but a real phone is still necessary. The preview does not always simulate the system keyboard, browser gestures, address bar behavior, slow networks, caching, or touch interaction. If the project matters, test at least one iOS scenario and one Android scenario, or ask colleagues to open the site on their own devices.

Result Checklist

• The open button is visible and understandable. It is not covered by the logo, chat button, cookie bar, or theme header.
• The menu closes in more than one way. The close button works, tapping the trigger again works, and close-on-selection behaves as expected if that setting is enabled.
• The submenu does not trap the user. Nested levels open and close without losing access to the top level.
• Scrolling behaves normally. If background scroll lock is enabled, the page becomes scrollable again after closing the menu.
• Search opens correctly over the interface. The field is not hidden behind the keyboard, the clear button does not cover the text, and search results open.
• The cart shows the expected state. After adding a product, the link goes to the cart, and the icon does not conflict with caching or the theme's cart.
• Desktop behavior matches the plan. If TapTap should be mobile-only, it does not appear on wide screens. If it is also meant for desktop, mouse and keyboard interaction should not break the scenario.

Checking Display Width Rules

TapTap can show or hide the menu at specific widths and can also hide it entirely on selected posts or pages. Use that for precise scenarios. For example, on the checkout page you may want to keep only the store's basic navigation, while on a landing page with its own custom header you may want to disable TapTap so users do not see two separate menus.

Do not guess the width breakpoint. Open the site at the widths where the theme changes its own header layout. If the theme switches to a mobile menu at 1024 pixels but TapTap appears at 768, there may be a zone between those values where navigation is either duplicated or missing. Configure the boundaries so that one interface transitions cleanly into the other.

Checking Speed and Weight

TapTap offers the option to disable loading Font Awesome and Line Awesome if icons are not used or are already loaded by another component. That is an important performance setting. If the site already loads the same icon set through the theme or page builder, loading it again may be unnecessary. If the menu does not use high-resolution images, there is no need to enable retina-related features if your plugin version offers that option.

Do not judge speed only by how the admin experience feels. Test the menu in Incognito mode, without the logged-in WordPress admin bar, with caching enabled, and on a mobile connection. If the menu opens with a delay, start by disabling the heaviest effects: background video, strong blur, unnecessary icons, and large background images.

Compatibility with the Theme, Caching, Page Builders, and WooCommerce

Any mobile menu plugin sits at the intersection of the theme, the WordPress menu system, JavaScript, CSS, caching, and sometimes WooCommerce. That is why compatibility issues rarely look like "the plugin is completely broken". More often they show up as smaller symptoms: the button opens, but the panel appears underneath the header; the menu is visible, but will not close; styles do not update after saving; the cart shows an old item count; the background still scrolls even though it should be locked.

TapTap gives you several tools for these situations: width-based display rules, hiding theme elements by class or ID, body scroll locking, disabling icon loading, choosing positioning, adjusting spacing, and separate modes for search, header, and menu. Use them in this order: first the built-in settings, then caching and optimization checks, and only after that targeted CSS.

Theme and Duplicate Menu Output

If the theme displays its own mobile button and TapTap adds a second one, visitors see two navigation entry points. That is almost always a bad experience. Choose one primary interface. If TapTap becomes the main mobile menu, the theme's old mobile button should be hidden. The official product page explicitly mentions the ability to hide the theme's menu, logo, and other elements by class or ID when TapTap is active.

Do not guess the selector. Open the developer tools, inspect the theme button, and check its class or ID. Then verify across several pages that the selector stays the same. Some themes use different headers for the homepage, inner pages, and the store. If you hide a selector that is too broad, you may accidentally remove not only the menu button but the entire header.

Caching and Script Optimization

If nothing changes after saving your settings, do not rush to reinstall the plugin. First clear the site cache, browser cache, and CDN cache if one is in use. Then temporarily disable JavaScript combining and delay rules for testing. Navigation plugins often depend on the menu-opening script loading at the proper moment. Aggressive optimization can push it too far back.

If TapTap works normally after optimization is disabled, restore optimization one rule at a time and identify the conflict. In many cases it is enough to exclude plugin files from script delay, avoid combining critical menu scripts, or disable minification for a specific stylesheet. Exact file names depend on the plugin version and build, so there is no point inventing a fake list here.

Page Builders and Fixed Elements

Elementor, WPBakery, Divi, and other page builders can add their own sticky sections, animations, and popup elements. TapTap can also change scrolling, blur, and content positioning when it opens. If the menu behaves differently on a builder page than on a normal post, check that page's local settings: sticky blocks, popups, anchors, z-index, and entrance animations.

Do not solve the conflict with a universal CSS rule such as * { z-index: 999999; }. That breaks modals, dropdowns, and forms. It is better to identify the exact element that covers the menu and either hide it through TapTap settings or adjust the behavior of the builder element itself.

WooCommerce and Store Pages

If you enable the cart button, test product pages, catalog pages, the cart, and checkout. There is no need to describe buying the plugin itself, but the live store flow matters: add a product, go to the cart, return to the catalog, and check whether the item count updates. If the theme already shows a cart in a bottom mobile bar, the TapTap cart button may be redundant.

On the checkout page, it is usually better not to distract the user with complex navigation. If TapTap lets you hide the menu on specific pages, consider a calmer header for the checkout flow. The site should help users finish the purchase, not invite them to open ten more sections.

Safe Improvements Without Editing Plugin Files

With TapTap, there is no reason to invent PHP hooks unless they are confirmed by the documentation for your specific version. But safe CSS adjustments are perfectly acceptable when you need to adapt the appearance to the theme. The rule is simple: do not edit WordPress core, theme, or plugin files directly. Use Appearance -> Customize -> Additional CSS, a child theme, or a reliable snippets tool.

Below is an example not as a universal magic fix, but as an approach. The classes on your site may differ, so check the actual selectors in the browser tools before pasting anything. If the class is different, replace it with your own. If the result gets worse after adding the CSS, remove the block and clear the cache.

Example: Increase the Tap Area of the Button While Keeping It Clean

The goal: the TapTap button looks fine, but it is difficult to tap on a phone. We are not changing JavaScript or interfering with the plugin itself. Instead, we increase the interactive area around the button through inner spacing while keeping the position intact.

/* TapTap: increase the comfortable tap area for the menu button.
   Replace .taptap-menu-button with the actual button class used on your site. */
.taptap-menu-button {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent nearby header elements from accidentally covering the button. */
.taptap-menu-button {
  position: relative;
  z-index: 50;
}

After inserting the CSS, open the site on a phone, tap the button several times, rotate the device, check the state after scrolling, and confirm that the button has not shifted relative to the logo. If the selector turns out to be wrong or the theme uses styles with higher specificity, do not pile on endless !important rules. It is better to identify the right class and review the relevant TapTap setting.

Example: Hide the Theme's Old Mobile Menu Only in the TapTap Scenario

Sometimes the theme continues to display its own menu button next to TapTap. If TapTap's built-in hide-by-class or hide-by-ID setting is not enough, you can hide the old element with CSS. The example below is conditional: replace .theme-mobile-menu-toggle with the exact class used by your theme.

/* Hide the theme's mobile menu button when TapTap takes over navigation. */
@media (max-width: 1024px) {
  .theme-mobile-menu-toggle {
    display: none;
  }
}

The validation is simple: at mobile width, only one menu button should remain, and on desktop the theme header should look the way it did before. If other header elements disappear, the selector is too broad. The rollback is also simple: remove the CSS block and clear the cache.

Do not add JavaScript to force TapTap open or closed unless you know the public API of your specific version. The menu already has its own event logic. A random script can break focus handling, scrolling, and touch-device behavior.

Why TapTap May Behave Incorrectly and How to Find the Cause

Troubleshooting is easier when you move from symptom to cause. Do not change ten settings at once. First reproduce the issue on a single page, then check the theme, cache, selected menu, display rules, and any conflicting elements. If you clear the cache and test after each change, the real cause is usually much easier to identify.

The Menu Button Is Not Visible

Symptom: the plugin is activated, but there is no TapTap button on the site. Possible reasons: the menu is hidden at the current width, the button is disabled, it is covered by the theme header, a large negative offset is set, the color matches the background, or the page is included in the exclusions.

Check the width-based display rules, button visibility, left or right position, and edge spacing. Then temporarily disable floating theme elements and clear the cache. If the button appears only when you are logged in as an admin, check guest caching and script optimization rules.

Two Menus Open at Once

Symptom: tapping the button reveals both the TapTap panel and the theme menu. The usual cause is that the theme's standard mobile header is still visible. Use TapTap's setting for hiding theme elements by class or ID. If that is not enough, add targeted CSS like in the earlier example.

Roll back the change if the logo, breadcrumbs, or other blocks disappear. That means the selector is too broad. You need the selector for the old menu button or its container, not for the entire header.

The Menu Opens, but the Page No Longer Scrolls After Closing

Symptom: after closing the panel, the background remains locked. The likely cause is a conflict between body scroll locking and the theme, a popup, a cookie bar, or a builder script. First disable the scroll-lock option and see whether the problem disappears. Then enable it again and test pages that contain modal windows.

If the lock is necessary but the conflict only repeats on one page, consider excluding TapTap from that page or simplifying the local popup elements there.

The Submenu Does Not Expand or Expands Too Many Levels

Symptom: the user taps an item, but the submenu does not open, or the entire branch expands at once. Check the WordPress menu structure, whether nested items actually exist, whether submenus open by arrow or by the whole item, the current-branch setting, and the cache. If the structure was changed but the site still shows the old version, clear the cache and save the menu again.

If the top-level item is both a link and a trigger, decide which role matters more. For mobile navigation, it is often better to add a separate "All Services" item inside the submenu and use the top-level item itself only to expand the group.

Search Opens, but the Results Are Wrong

Symptom: the search field appears, but users do not get the pages or products they expect. TapTap controls the search interface, but the result itself depends on WordPress, the theme, WooCommerce, or a separate search plugin. Check where the query is sent, how the results page looks, and whether another component is intercepting search behavior.

If the site uses a specialized product search, it may be better to keep the theme's or store's search and disable TapTap's own search button. Do not promise catalog search to visitors if the site is actually running only a general post search.

Icons Do Not Display or Look Wrong After an Update

Symptom: you see empty squares, outdated symbols, or incorrect icons instead of the expected ones. The TapTap changelog mentions a Font Awesome update and a change in how icons are entered in one of the major versions. Check the documentation for your version, the selected icon set, and the loading setting for Font Awesome or Line Awesome.

If the site already loads icons through the theme, a version conflict can produce unexpected results. Temporarily enable the icon set loading inside TapTap or, on the contrary, disable it if the site already includes the correct set elsewhere. Use a single icon source and test several menu items.

The Menu Feels Slow on Mobile

Symptom: the panel opens with a delay, the animation stutters, and scrolling inside the menu feels heavy. Possible reasons include background video, large images, strong blur, too many icons, a long menu, multiple widgets, aggressive script optimization, or a weak device.

Simplify the experience layer by layer: disable video, reduce the background weight, remove unnecessary widgets, test without blur and content scaling, and turn off extra icon sets. If that makes the menu fast again, restore only the effects that are truly necessary.

When CodeCanyon TapTap Is the Right Choice

TapTap is worth using if mobile navigation is an important part of your site, not just a secondary button. The plugin gives you many settings: button, logo, search, WooCommerce cart, menu container, backgrounds, animations, widgets, multi-level structure, display rules, hiding theme elements, and horizontal and image-based modes. That combination is especially useful for sites where mobile visitors need to reach the right section quickly, contact the company, find a product, or explore a service structure.

But TapTap only shows its real strength when configured with discipline. First prepare the WordPress menu, then set up the button and header, then the panel, submenus, search, cart, display rules, and theme compatibility. Do not enable every effect at once. Test the result on a real phone, in the cached version, and on pages that include forms, products, fixed elements, or anchor links.

If that workflow fits your site, you can proceed to download CodeCanyon TapTap, install the ZIP file on a staging copy, and follow this guide step by step. If your theme already provides a simple and usable mobile menu and the site structure is minimal, it may be better not to add another layer at all and just rely on the theme settings.

The main decision criterion is simple: TapTap should shorten the visitor's path to the section they need. If the menu looks better but opens more slowly, duplicates the header, becomes overloaded with widgets, or hides important actions, the setup should be simplified. If it helps users quickly reach services, search, the cart, and contact information, then the plugin is doing its job.