Description
LR Responsive Slide Menu is a lightweight, responsive mobile navigation plugin for WordPress. It replaces your site’s standard navigation with a modern, smooth slide-out panel on mobile viewports.
Key Features
- Multi-level Submenu Support: Easily navigate through deep parent-child menu hierarchies.
- Customization Settings: Configure background colors, hover states, text colors, and hover text colors directly from the settings page.
- Responsive Breakpoint: Choose the exact screen pixel width (e.g., 767px) at which the slide menu becomes active.
- Integrated Icon Support: Uses clean local Font Awesome assets for navigation and toggle icons.
- Easy Integration: Simply place a shortcode or PHP function in your theme’s
header.php.
For more support and features, please contact us at Logicrays.
Installation
- Upload the entire
lr-responsive-slide-menudirectory to the/wp-content/plugins/directory. - Activate the plugin through the Plugins menu in the WordPress Admin Dashboard.
- Open your active theme’s
header.phpfile (or relevant template file) and place the following PHP code where you want the mobile menu toggle button to appear: - Go to Settings -> Responsive Slide Menu in the WordPress Admin Dashboard to configure your menu location, mobile width breakpoint, and custom colors.
FAQ
-
You can display the slide menu by placing the shortcode
[responsiveslidemenu]anywhere on your site. For standard theme integration, paste the following PHP snippet into your theme’sheader.phpfile: -
You can load a menu in either of these ways:
- By WordPress menu name: Set Slide Menu Id to your menu name (e.g.
top-menu). If a menu with that name exists, it and all its submenus will be used automatically. - By theme location: Go to Appearance -> Menus, assign your menu to a theme location (e.g. Mobile Menu or Desktop Horizontal Menu for Twenty Twenty), note the location slug (e.g.
mobileorprimary), and enter it in Theme Location under Settings -> Responsive Slide Menu.
If Theme Location is empty or invalid, the plugin falls back to
mobile, thenprimary, and other common locations. - By WordPress menu name: Set Slide Menu Id to your menu name (e.g.
-
- Hard refresh the page (Ctrl+Shift+R) and test in mobile view (viewport width at or below your configured breakpoint, e.g. 767px).
- Ensure the shortcode is added in your theme’s
header.php:<?php echo do_shortcode( '[responsiveslidemenu]' ); ?> - For Twenty Twenty, use Theme Location
mobileor set Slide Menu Id to your WordPress menu name (e.g.top-menu). - Confirm your menu is assigned under Appearance -> Menus and includes the items you expect.
-
Submenus only appear when the correct WordPress menu is loaded. If your nested menu is assigned to Mobile Menu but the plugin was loading Primary, submenus will not show. Set Slide Menu Id to your menu name (e.g.
top-menu) or set Theme Location tomobile. Parent items with children display a>indicator; tap them to slide into the submenu. -
Yes! The plugin settings page includes built-in WordPress color pickers. You can customize:
* Slide Menu Background Color
* Slide Menu Background Hover Color
* Slide Menu Item Text Color
* Slide Menu Item Text Hover Color -
Yes, it fully supports nested menus. When a parent item is clicked, the submenus slide smoothly into view. The panel also displays “Back” and “Close” controls to allow users to navigate back up the menu tree or close the menu entirely.
-
In the plugin settings page (Settings -> Responsive Slide Menu), update the value in the Pixel Width to Switch to Slide Menu field (e.g.,
767for standard tablets/mobile). The mobile menu toggle will only show up when the user’s viewport is equal to or narrower than this width.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“LR Responsive Slide Menu” is open source software. The following people have contributed to this plugin.
Contributors
Translate “LR Responsive Slide Menu” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0
- Fixed “jQuery is not defined” error by loading menu initialization in the footer with proper script dependencies.
- Fixed hamburger toggle not responding when overlapped by theme header buttons (e.g. Twenty Twenty search icon).
- Fixed slide menu loading the wrong WordPress menu, which caused flat menus and missing submenus.
- Added support for loading a menu by WordPress menu name via Slide Menu Id (e.g.
top-menu). - Improved theme location fallback order (
mobile, thenprimary) for mobile slide menus. - Repositioned the mobile toggle button (fixed top-right) and moved the slide panel to
bodyfor reliable display. - Hide the theme’s mobile nav toggle when the slide menu is active on supported themes.
- Enqueue frontend assets only when the shortcode is rendered.
- General code quality and WordPress coding standards improvements.
1.0
- Initial release with local Font Awesome assets and WordPress coding standards fixes.