WordPress Plugin that allows you to show different navigation menus based on the screen size using the Navigation block.
Complete control over your navigation menus based on screen size including styles and menu items.
This Plugin allows you to display and apply alternative styling to different navigation menus based on the screen size using the WordPress Navigation block.
### Video Walkthrough
[youtube https://www.youtube.com/watch?v=R5kzAaEsDMg]
This Plugin creates two block variations from the Navigation block which will be automatically hidden/shown at the configured screensize (breakpoint):
This affords the ability to independently style mobile vs desktop navigation and even allows for completely different menus to be used.
The Plugin should be used as follows:
Alternatively you can transform the default Navigation block to either Mobile
or Desktop
variations via the block's interface.
Please see FAQs. If you still have an issue please:
Responsive Navigation does not:
The built in WordPress Navigation block provides limited control over its display on smaller screens. Whilst efforts are underway to implement solutions to this natively within WordPress they are currently still in development.
Until a solution arrives in WordPress Core, this Plugin exists to provide a workaround solution that requires minimal user configuration.
This Plugin was based upon a technique which I originally documented in my YouTube Video: Use a different MENU on MOBILE with the Navigation block in WORDPRESS block editor.
By default, the "breakpoint" at which the mobile navigation will switch to show the desktop navigation is 782px
. This aligns with the default configuration of the built in Wordpress Navigation block. To change this you can:
Settings -> Responsive Navigation
.Note that you can use relative units such as em
, rem
and vw
.
Due to complications with the way the default WordPress Navigation block works you are advised to use the following settings to control the styling of your mobile navigation:
Styles -> Color -> Submenu & overlay background
.Styles -> Color -> Submenu & overlay text
.Styles -> Color -> Text
.Styles -> Color -> Background
.Styles for Desktop Navigation can be applied using the standard controls.
Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.
This Plugin uses the @wordpress/scripts package.
wp-content/plugins
directory of a WordPress installation.cd
into the Plugin's directory install the dependencies with npm i
.npm start
will start the @wordpress/scripts
package in watch mode ready to compile the JavaScript on modification.The Plugin has e2e test coverage for the key features courtesey of @wordpress/scripts and Playwright.
To run the tests - in your terminal of choice:
npm run build
.npm run wp-env start
.npm run test:e2e
Releasing the Plugin to the WordPress.org Plugin repo is the prerogative of the Plugin owner (@get_dave). The process is as follows:
trunk
branch.trunk
(only) - git push origin trunk
.Build Release Zip
action.Run workflow
dropdown and run the workflow to generate a zip file.npm run bump-version
.git push origin trunk --tags