{"id":192886,"date":"2024-10-04T10:36:16","date_gmt":"2024-10-04T10:36:16","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/responsive-navigation-block-control-your-menus-based-on-screen-size\/"},"modified":"2025-09-27T17:02:34","modified_gmt":"2025-09-27T17:02:34","slug":"getdave-responsive-navigation-block","status":"publish","type":"plugin","link":"https:\/\/dzo.wordpress.org\/plugins\/getdave-responsive-navigation-block\/","author":11518672,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.10","stable_tag":"1.0.10","tested":"6.8.5","requires":"6.5","requires_php":"","requires_plugins":null,"header_name":"Responsive Navigation Block","header_author":"Dave Smith","header_description":"Allows you to show different navigation menus based on the screen size using the Navigation block.","assets_banners_color":"5b5958","last_updated":"2025-09-27 17:02:34","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/getdave\/responsive-navigation-block","header_author_uri":"https:\/\/aheadcreative.co.uk","rating":5,"author_block_rating":0,"active_installs":1000,"downloads":10062,"num_ratings":5,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","faq"],"tags":{"1.0.10":{"tag":"1.0.10","author":"get_dave","date":"2025-09-27 17:02:34"},"1.0.7":{"tag":"1.0.7","author":"get_dave","date":"2024-10-07 16:39:23"},"1.0.8":{"tag":"1.0.8","author":"get_dave","date":"2024-10-10 11:13:23"},"1.0.9":{"tag":"1.0.9","author":"get_dave","date":"2025-09-27 16:59:18"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":5},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3162655,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3162655,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3162655,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3162655,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3368929,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"steps\":[{\"step\":\"login\"},{\"step\":\"installPlugin\",\"pluginZipFile\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"getdave-responsive-navigation-block\"},\"options\":{\"activate\":true}}],\"landingPage\":\"\\\/wp-admin\\\/site-editor.php?canvas=edit\"}"}},"all_blocks":[],"tagged_versions":["1.0.10","1.0.7","1.0.8","1.0.9"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3162655,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3162655,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3162655,"resolution":"3","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[4121,231,841,1753,606],"plugin_category":[43],"plugin_contributors":[87069],"plugin_business_model":[],"class_list":["post-192886","plugin","type-plugin","status-publish","hentry","plugin_tags-blocks","plugin_tags-menus","plugin_tags-mobile","plugin_tags-navigation","plugin_tags-responsive","plugin_category-customization","plugin_contributors-get_dave","plugin_committers-get_dave"],"banners":{"banner":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/banner-772x250.png?rev=3162655","banner_2x":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/banner-1544x500.png?rev=3162655","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/icon-128x128.png?rev=3162655","icon_2x":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/icon-256x256.png?rev=3162655","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/screenshot-1.png?rev=3162655","caption":""},{"src":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/screenshot-2.png?rev=3162655","caption":""},{"src":"https:\/\/ps.w.org\/getdave-responsive-navigation-block\/assets\/screenshot-3.png?rev=3162655","caption":""}],"raw_content":"<!--section=description-->\n<p>This Plugin allows you to display and apply alternative styling to different navigation menus based on the screen size using the WordPress Navigation block.<\/p>\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/getdave-responsive-navigation-block\/\"><\/a> <a href=\"https:\/\/playground.wordpress.net\/?blueprint-url=https:\/\/raw.githubusercontent.com\/getdave\/responsive-navigation-block\/refs\/heads\/trunk\/.wordpress-org\/blueprints\/blueprint.json\"><\/a><\/p>\n\n<h3>\u00a0Video Walkthrough<\/h3>\n\n<p>[youtube https:\/\/www.youtube.com\/watch?v=R5kzAaEsDMg]<\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>Two new Navigation Block (variations) for:\n\n<ul>\n<li>Mobile<\/li>\n<li>Desktop<\/li>\n<\/ul><\/li>\n<li>Style your menu differently depending on screen size.<\/li>\n<li>Use a different menu for each screen size.<\/li>\n<li>Customize the \"breakpoint\" (where you switch between mobile and desktop).<\/li>\n<li>Automatically switch editor to \"mobile\" preview when editing the mobile navigation.<\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<p>This Plugin creates two block variations from the Navigation block which will be <strong>automatically hidden\/shown at the configured screensize<\/strong> (breakpoint):<\/p>\n\n<ul>\n<li>Navigation (Mobile) - will be displayed only on smaller screen sizes.<\/li>\n<li>Navigation (Desktop) - will be displayed only on larger screen sizes.<\/li>\n<\/ul>\n\n<p>This affords the ability to <strong>independently style mobile vs desktop navigation<\/strong> and even allows for <strong>completely different menus<\/strong> to be used.<\/p>\n\n<p>The Plugin should be used as follows:<\/p>\n\n<ul>\n<li>Install and Activate the plugin - two new block variations will be automatically registered for \"Mobile\" and \"Desktop\".<\/li>\n<li>Go to the Editor and remove any existing Navigation block.<\/li>\n<li>Add the \"Desktop Navigation\" block - style and configure the menu for \"desktop\" as required.<\/li>\n<li>Add the \"Mobile Navigation\" block - style and configure the menu for \"mobile\" as required.<\/li>\n<li>View the front of your website and resize your browser to see the navigations swap out at the appropriate breakpoint\/screensize.<\/li>\n<\/ul>\n\n<p>Alternatively you can transform the default Navigation block to either <code>Mobile<\/code> or <code>Desktop<\/code> variations via the block's interface.<\/p>\n\n<h3>Support<\/h3>\n\n<p>Please see FAQs. If you still have an issue please:<\/p>\n\n<ul>\n<li>check <a href=\"https:\/\/github.com\/getdave\/responsive-navigation-block\/issues\">Github for existing Issue reports<\/a>.<\/li>\n<li>(if none) then file a new Issue on Github<\/li>\n<\/ul>\n\n<h3>Privacy Statement<\/h3>\n\n<p>Responsive Navigation does <em>not<\/em>:<\/p>\n\n<ul>\n<li>use cookies.<\/li>\n<li>send data to any third party.<\/li>\n<li>include any third party resources.<\/li>\n<\/ul>\n\n<h3>Contributing<\/h3>\n\n<p>Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.<\/p>\n\n<h3>Development Setup<\/h3>\n\n<p>This Plugin uses the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\">@wordpress\/scripts package<\/a>.<\/p>\n\n<ul>\n<li>Check out the Github repo into the <code>wp-content\/plugins<\/code> directory of a WordPress installation.<\/li>\n<li><code>cd<\/code> into the Plugin's directory install the dependencies with <code>npm i<\/code>.<\/li>\n<li>Running <code>npm start<\/code> will start the <code>@wordpress\/scripts<\/code> package in watch mode ready to compile the JavaScript on modification.<\/li>\n<li>PHP files can be edited in the usual manner.<\/li>\n<\/ul>\n\n<h3>Testing<\/h3>\n\n<p>The Plugin has e2e test coverage for the key features courtesey of @wordpress\/scripts and Playwright.<\/p>\n\n<p>To run the tests - in your terminal of choice:<\/p>\n\n<ul>\n<li><code>npm run build<\/code>.<\/li>\n<li><code>npm run wp-env start<\/code>.<\/li>\n<li>Run the tests: <code>npm run test:e2e<\/code><\/li>\n<\/ul>\n\n<h3>Releasing<\/h3>\n\n<p>Releasing the Plugin to the WordPress.org Plugin repo is the prerogative of the Plugin owner (@get_dave). The process is as follows:<\/p>\n\n<h4>Test the Plugin<\/h4>\n\n<ul>\n<li>Commit all changes to <code>trunk<\/code> branch.<\/li>\n<li>Push changes to <code>trunk<\/code> (only) - <code>git push origin trunk<\/code>.<\/li>\n<li>In Github:\n\n<ul>\n<li>Actions<\/li>\n<li>Select the <a href=\"https:\/\/github.com\/getdave\/responsive-navigation-block\/actions\/workflows\/build-release-zip.yml\"><code>Build Release Zip<\/code> action<\/a>.<\/li>\n<li>Select the <code>Run workflow<\/code> dropdown and run the workflow to generate a zip file.<\/li>\n<li>When action completes download the generated Plugin zip artifact.<\/li>\n<li>Manually install and test the .zip.<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<h4>Deploy to WP.org<\/h4>\n\n<ul>\n<li>When ready to deploy.<\/li>\n<li>Bump Plugin version and tag release - <code>npm run bump-version<\/code>.<\/li>\n<li>Push trunk and tags - <code>git push origin trunk --tags<\/code><\/li>\n<li>Deployment to WP.org will be handled automatically.<\/li>\n<\/ul>\n\n<!--section=faq-->\n<dl>\n<dt id='why%20is%20this%20plugin%20necessary%3F'><h3>Why is this plugin necessary?<\/h3><\/dt>\n<dd><p>The built in WordPress Navigation block provides limited control over its display on smaller screens. Whilst <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/43852#issuecomment-1884949063\">efforts are underway to implement solutions to this natively within WordPress<\/a> they are currently still in development.<\/p>\n\n<p>Until a solution arrives in WordPress Core, this Plugin exists to provide a workaround solution that requires minimal user configuration.<\/p>\n\n<p>This Plugin was based upon a technique which I originally documented in my <a href=\"https:\/\/www.youtube.com\/watch?v=dY3f8sHcAPA\">YouTube Video: Use a different MENU on MOBILE with the Navigation block in WORDPRESS block editor<\/a>.<\/p><\/dd>\n<dt id='can%20i%20adjust%20the%20breakpoint%3F'><h3>Can I adjust the breakpoint?<\/h3><\/dt>\n<dd><p>By default, the \"breakpoint\" at which the mobile navigation will switch to show the desktop navigation is <code>782px<\/code>. This aligns with the default configuration of the built in Wordpress Navigation block. To change this you can:<\/p>\n\n<ul>\n<li>Go to the WP Admin Dashboard.<\/li>\n<li>Go to <code>Settings -&gt; Responsive Navigation<\/code>.<\/li>\n<li>Configure the breakpoint value and the required unit. Save.<\/li>\n<li>The breakpoint will be adjusted to match your new configuration.<\/li>\n<\/ul>\n\n<p>Note that you can use relative units such as <code>em<\/code>, <code>rem<\/code> and <code>vw<\/code>.<\/p><\/dd>\n<dt id='styling%20of%20my%20mobile%20menu%20doesn%27t%20work'><h3>Styling of my mobile menu doesn't work<\/h3><\/dt>\n<dd><p>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:<\/p>\n\n<ul>\n<li>Mobile overlay\n\n<ul>\n<li>background color - <code>Styles -&gt; Color -&gt; Submenu &amp; overlay background<\/code>.<\/li>\n<li>text color - <code>Styles -&gt; Color -&gt; Submenu &amp; overlay text<\/code>.<\/li>\n<\/ul><\/li>\n<li>Mobile menu toggle button (\"hamburger\"):\n\n<ul>\n<li>icon color - <code>Styles -&gt; Color -&gt; Text<\/code>.<\/li>\n<li>background color - <code>Styles -&gt; Color -&gt; Background<\/code>.<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<p>Styles for Desktop Navigation can be applied using the standard controls.<\/p><\/dd>\n\n<\/dl>","raw_excerpt":"Complete control over your navigation menus based on screen size including styles and menu items.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/192886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=192886"}],"author":[{"embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/get_dave"}],"wp:attachment":[{"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=192886"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=192886"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=192886"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=192886"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=192886"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/dzo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=192886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}