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
<\/a> <\/a><\/p>\n\u00a0Video Walkthrough<\/h3>\n<\/iframe><\/span><\/p>\n<h3>Features<\/h3>\n<ul>\n<li>Two new Navigation Block (variations) for:\n<ul>\n<li>Mobile<\/li>\n<li>Desktop<\/li>\n<\/ul>\n<\/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 \u201cbreakpoint\u201d (where you switch between mobile and desktop).<\/li>\n<li>Automatically switch editor to \u201cmobile\u201d preview when editing the mobile navigation.<\/li>\n<\/ul>\n<h3>Usage<\/h3>\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<ul>\n<li>Navigation (Mobile) \u2013 will be displayed only on smaller screen sizes.<\/li>\n<li>Navigation (Desktop) \u2013 will be displayed only on larger screen sizes.<\/li>\n<\/ul>\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<p>The Plugin should be used as follows:<\/p>\n<ul>\n<li>Install and Activate the plugin \u2013 two new block variations will be automatically registered for \u201cMobile\u201d and \u201cDesktop\u201d.<\/li>\n<li>Go to the Editor and remove any existing Navigation block.<\/li>\n<li>Add the \u201cDesktop Navigation\u201d block \u2013 style and configure the menu for \u201cdesktop\u201d as required.<\/li>\n<li>Add the \u201cMobile Navigation\u201d block \u2013 style and configure the menu for \u201cmobile\u201d 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<p>Alternatively you can transform the default Navigation block to either <code>Mobile<\/code> or <code>Desktop<\/code> variations via the block\u2019s interface.<\/p>\n<h3>Support<\/h3>\n<p>Please see FAQs. If you still have an issue please:<\/p>\n<ul>\n<li>check <a href=\"https:\/\/github.com\/getdave\/responsive-navigation-block\/issues\" rel=\"nofollow ugc\">Github for existing Issue reports<\/a>.<\/li>\n<li>(if none) then file a new Issue on Github<\/li>\n<\/ul>\n<h3>Privacy Statement<\/h3>\n<p>Responsive Navigation does <em>not<\/em>:<\/p>\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<h3>Contributing<\/h3>\n<p>Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.<\/p>\n<h3>Development Setup<\/h3>\n<p>This Plugin uses the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" rel=\"nofollow ugc\">@wordpress\/scripts package<\/a>.<\/p>\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\u2019s 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<h3>Testing<\/h3>\n<p>The Plugin has e2e test coverage for the key features courtesey of @wordpress\/scripts and Playwright.<\/p>\n<p>To run the tests \u2013 in your terminal of choice:<\/p>\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<h3>Releasing<\/h3>\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<h4>Test the Plugin<\/h4>\n<ul>\n<li>Commit all changes to <code>trunk<\/code> branch.<\/li>\n<li>Push changes to <code>trunk<\/code> (only) \u2013 <code>git push origin trunk<\/code>.<\/li>\n<li>In Github:\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\" rel=\"nofollow ugc\"><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>\n<\/li>\n<\/ul>\n<h4>Deploy to WP.org<\/h4>\n<ul>\n<li>When ready to deploy.<\/li>\n<li>Bump Plugin version and tag release \u2013 <code>npm run bump-version<\/code>.<\/li>\n<li>Push trunk and tags \u2013 <code>git push origin trunk --tags<\/code><\/li>\n<li>Deployment to WP.org will be handled automatically.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Complete control over your navigation menus based on screen size including styles and menu items.<\/p>\n","protected":false},"author":65,"featured_media":409362,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Responsive Navigation Block - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Complete control over your navigation menus based on screen size including styles and menu items."},"footnotes":""},"categories":[1],"tags":[745,1138,1045,978,359],"class_list":["post-409361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-blocks","tag-menus","tag-mobile","tag-navigation","tag-responsive"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=409361"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/409362"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=409361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=409361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=409361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/iframe><\/span><\/p>\n<h3>Features<\/h3>\n<ul>\n<li>Two new Navigation Block (variations) for:\n<ul>\n<li>Mobile<\/li>\n<li>Desktop<\/li>\n<\/ul>\n<\/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 \u201cbreakpoint\u201d (where you switch between mobile and desktop).<\/li>\n<li>Automatically switch editor to \u201cmobile\u201d preview when editing the mobile navigation.<\/li>\n<\/ul>\n<h3>Usage<\/h3>\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<ul>\n<li>Navigation (Mobile) \u2013 will be displayed only on smaller screen sizes.<\/li>\n<li>Navigation (Desktop) \u2013 will be displayed only on larger screen sizes.<\/li>\n<\/ul>\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<p>The Plugin should be used as follows:<\/p>\n<ul>\n<li>Install and Activate the plugin \u2013 two new block variations will be automatically registered for \u201cMobile\u201d and \u201cDesktop\u201d.<\/li>\n<li>Go to the Editor and remove any existing Navigation block.<\/li>\n<li>Add the \u201cDesktop Navigation\u201d block \u2013 style and configure the menu for \u201cdesktop\u201d as required.<\/li>\n<li>Add the \u201cMobile Navigation\u201d block \u2013 style and configure the menu for \u201cmobile\u201d 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<p>Alternatively you can transform the default Navigation block to either <code>Mobile<\/code> or <code>Desktop<\/code> variations via the block\u2019s interface.<\/p>\n<h3>Support<\/h3>\n<p>Please see FAQs. If you still have an issue please:<\/p>\n<ul>\n<li>check <a href=\"https:\/\/github.com\/getdave\/responsive-navigation-block\/issues\" rel=\"nofollow ugc\">Github for existing Issue reports<\/a>.<\/li>\n<li>(if none) then file a new Issue on Github<\/li>\n<\/ul>\n<h3>Privacy Statement<\/h3>\n<p>Responsive Navigation does <em>not<\/em>:<\/p>\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<h3>Contributing<\/h3>\n<p>Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.<\/p>\n<h3>Development Setup<\/h3>\n<p>This Plugin uses the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" rel=\"nofollow ugc\">@wordpress\/scripts package<\/a>.<\/p>\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\u2019s 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<h3>Testing<\/h3>\n<p>The Plugin has e2e test coverage for the key features courtesey of @wordpress\/scripts and Playwright.<\/p>\n<p>To run the tests \u2013 in your terminal of choice:<\/p>\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<h3>Releasing<\/h3>\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<h4>Test the Plugin<\/h4>\n<ul>\n<li>Commit all changes to <code>trunk<\/code> branch.<\/li>\n<li>Push changes to <code>trunk<\/code> (only) \u2013 <code>git push origin trunk<\/code>.<\/li>\n<li>In Github:\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\" rel=\"nofollow ugc\"><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>\n<\/li>\n<\/ul>\n<h4>Deploy to WP.org<\/h4>\n<ul>\n<li>When ready to deploy.<\/li>\n<li>Bump Plugin version and tag release \u2013 <code>npm run bump-version<\/code>.<\/li>\n<li>Push trunk and tags \u2013 <code>git push origin trunk --tags<\/code><\/li>\n<li>Deployment to WP.org will be handled automatically.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Complete control over your navigation menus based on screen size including styles and menu items.<\/p>\n","protected":false},"author":65,"featured_media":409362,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Responsive Navigation Block - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Complete control over your navigation menus based on screen size including styles and menu items."},"footnotes":""},"categories":[1],"tags":[745,1138,1045,978,359],"class_list":["post-409361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-blocks","tag-menus","tag-mobile","tag-navigation","tag-responsive"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=409361"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/409362"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=409361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=409361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=409361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}