MobileNav Pro - App-Style Bottom Navigation

MobileNav Pro adds a polished, app-style bottom navigation bar to any WordPress site. Your mobile visitors get the familiar tab-bar experience they know from native apps — Home, Search, Cart, Account — while you control every pixel from a visual builder in wp-admin. No shortcodes to memorize, no icon font names to type, no CSS to write. It was built around the four complaints buyers raise most often about mobile menu plugins:

1. Icons that sometimes do not show. Many plugins depend on icon fonts, which break when a font file is blocked or loads late. MobileNav Pro ships 67 hand-designed icons as inline SVG. They render with the page, stay sharp on retina screens, and cannot fail to load. You can also upload your own SVG.
2. No real font control. Use your theme's font with zero extra requests, or pick from 30 Google Fonts with weight selection — plus independent control of label size, weight, line height, letter spacing, and colors.
3. A forced underline. There is a dedicated underline on/off toggle, plus six active marker styles: none, solid colour, pill background, top line, underline, and raised.
4. A bar height you cannot change. A slider adjusts the bar from 48 to 96 px, with independent icon size, label size, and item padding so everything stays proportional.

Features

• Drag-and-drop menu builder with per-item show/hide and reordering
• 67 hand-designed inline SVG icons in one consistent style, searchable picker, plus custom SVG upload
• Link types: Custom URL, Page, Post, Search (full-screen modal), Call, WhatsApp, Directions, Back to top, Home
• Unlimited items with an automatic "More" drawer past your threshold
• Live phone mockup updates instantly on every design change (320 / 375 / 414 px widths)
• Backgrounds: solid color, gradient, or frosted glass, with opacity and corner-radius control
• Safe-area padding for phones with a home indicator or notch, custom CSS field
• Show on mobile, tablet, and desktop independently; hide on scroll down, reveal on scroll up
• Display scope: all pages, front page only, pages only, selected post types, or selected pages
• Visibility: everyone, logged-in users, logged-out visitors, or specific roles
• WooCommerce: live cart badge (classic and block themes), Shop and Account link types, auto-appearing cart/account items
• Five one-click starter kits: Online Store, Restaurant, Blog / Magazine, Clinic, Portfolio
• Edit design and behavior inside Appearance → Customize with live preview
• Export/import settings (JSON with validation), one-click reset, clean uninstall
• Vanilla JS, no frameworks, zero external requests by default, translation-ready with POT file

Requirements

• WordPress 6.0 or higher
• PHP 8.0 or higher
• A theme that calls wp_footer() (nearly all themes do)
• WooCommerce (optional — only needed for the shop, cart, and account link types)

Instructions

1. Download mobilenav-pro.zip from your purchase.
2. In wp-admin go to Plugins > Add New > Upload Plugin, choose the zip, click Install Now, then Activate.
3. Go to MobileNav in the admin sidebar to build your menu: add items, pick icons from the searchable gallery, choose link types.
4. In the Design tab, set colors, background style, active marker, bar height, and fonts while the live phone mockup updates.
5. In Behavior, choose devices, display scope, visibility, and hide-on-scroll.
6. Or apply one of the 5 starter kits for a one-click setup. Open your site on a phone to verify.