David Smith

<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>
<p><a href="https://wordpress.org/plugins/getdave-responsive-navigation-block/" rel="ugc"></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" rel="nofollow ugc"></a></p>
<h3> Video Walkthrough</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/R5kzAaEsDMg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Features</h3>
<ul>
<li>Two new Navigation Block (variations) for:
<ul>
<li>Mobile</li>
<li>Desktop</li>
</ul>
</li>
<li>Style your menu differently depending on screen size.</li>
<li>Use a different menu for each screen size.</li>
<li>Customize the “breakpoint” (where you switch between mobile and desktop).</li>
<li>Automatically switch editor to “mobile” preview when editing the mobile navigation.</li>
</ul>
<h3>Usage</h3>
<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>
<ul>
<li>Navigation (Mobile) – will be displayed only on smaller screen sizes.</li>
<li>Navigation (Desktop) – will be displayed only on larger screen sizes.</li>
</ul>
<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>
<p>The Plugin should be used as follows:</p>
<ul>
<li>Install and Activate the plugin – two new block variations will be automatically registered for “Mobile” and “Desktop”.</li>
<li>Go to the Editor and remove any existing Navigation block.</li>
<li>Add the “Desktop Navigation” block – style and configure the menu for “desktop” as required.</li>
<li>Add the “Mobile Navigation” block – style and configure the menu for “mobile” as required.</li>
<li>View the front of your website and resize your browser to see the navigations swap out at the appropriate breakpoint/screensize.</li>
</ul>
<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>
<h3>Support</h3>
<p>Please see FAQs. If you still have an issue please:</p>
<ul>
<li>check <a href="https://github.com/getdave/responsive-navigation-block/issues" rel="nofollow ugc">Github for existing Issue reports</a>.</li>
<li>(if none) then file a new Issue on Github</li>
</ul>
<h3>Privacy Statement</h3>
<p>Responsive Navigation does <em>not</em>:</p>
<ul>
<li>use cookies.</li>
<li>send data to any third party.</li>
<li>include any third party resources.</li>
</ul>
<h3>Contributing</h3>
<p>Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.</p>
<h3>Development Setup</h3>
<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>
<ul>
<li>Check out the Github repo into the <code>wp-content/plugins</code> directory of a WordPress installation.</li>
<li><code>cd</code> into the Plugin’s directory install the dependencies with <code>npm i</code>.</li>
<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>
<li>PHP files can be edited in the usual manner.</li>
</ul>
<h3>Testing</h3>
<p>The Plugin has e2e test coverage for the key features courtesey of @wordpress/scripts and Playwright.</p>
<p>To run the tests – in your terminal of choice:</p>
<ul>
<li><code>npm run build</code>.</li>
<li><code>npm run wp-env start</code>.</li>
<li>Run the tests: <code>npm run test:e2e</code></li>
</ul>
<h3>Releasing</h3>
<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>
<h4>Test the Plugin</h4>
<ul>
<li>Commit all changes to <code>trunk</code> branch.</li>
<li>Push changes to <code>trunk</code> (only) – <code>git push origin trunk</code>.</li>
<li>In Github:
<ul>
<li>Actions</li>
<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>
<li>Select the <code>Run workflow</code> dropdown and run the workflow to generate a zip file.</li>
<li>When action completes download the generated Plugin zip artifact.</li>
<li>Manually install and test the .zip.</li>
</ul>
</li>
</ul>
<h4>Deploy to WP.org</h4>
<ul>
<li>When ready to deploy.</li>
<li>Bump Plugin version and tag release – <code>npm run bump-version</code>.</li>
<li>Push trunk and tags – <code>git push origin trunk --tags</code></li>
<li>Deployment to WP.org will be handled automatically.</li>
</ul>


Responsive Navigation Block


Thanks for providing a solution to this common problem, it is very helpful


Such a needed feature, thank you!

Complete control over your navigation menus based on screen size including styles and menu items.

themebeez

<p>A essential toolkit for <a href="https://themebeez.com/" rel="nofollow ugc">WordPress themes</a> developed by us. Themebeez Toolkit helps you to import dummy demo contents. It also adds extra features & functionality our themes.</p>
<h4>✨ WHICH THEME DEMO IMPORT IS INCLUDED:</h4>
<p>✅ Orchid Store: <a href="https://themebeez.com/themes/orchid-store/" rel="nofollow ugc">Link</a><br />
✅ Orchid Store Pro: <a href="https://themebeez.com/themes/orchid-store-pro/" rel="nofollow ugc">Link</a><br />
✅ Cream Magazine: <a href="https://themebeez.com/themes/cream-magazine/" rel="nofollow ugc">Link</a><br />
✅ Cream Magazine Pro: <a href="https://themebeez.com/themes/cream-magazine-pro/" rel="nofollow ugc">Link</a><br />
✅ Fascinate: <a href="https://themebeez.com/themes/fascinate/" rel="nofollow ugc">Link</a><br />
✅ Fascinate Pro: <a href="https://themebeez.com/themes/fascinate-pro/" rel="nofollow ugc">Link</a><br />
✅ Cream Blog: <a href="https://themebeez.com/themes/cream-blog/" rel="nofollow ugc">Link</a><br />
✅ Cream Blog Pro: <a href="https://themebeez.com/themes/cream-blog-pro/" rel="nofollow ugc">Link</a><br />
✅ StyleBlog Plus: <a href="https://themebeez.com/themes/style-blog-pro/" rel="nofollow ugc">Link</a><br />
✅ Royale News: <a href="https://themebeez.com/themes/royale-news/" rel="nofollow ugc">Link</a><br />
✅ Royale News Pro: <a href="https://themebeez.com/themes/royale-news-pro/" rel="nofollow ugc">Link</a></p>
<h4>✨ WHY TO USE THEMEBEEZ TOOLKIT?</h4>
<p>✅ To import one click demo content for your website.<br />
✅It also adds extra functionality to Orchid store theme as we have extended simple mega menu functionality in Orchid Store theme via this plugin.</p>
<h4>✨ HOW TO USE THEMEBEEZ TOOLKIT?</h4>
<p>✅ While installing any free themes by themebeez do kindly install & activate prompt plugin “Themebeez Toolkit ” or you can do this manually too.<br />
✅ After activating the Themebeez Toolkit plugin, if you are using a theme provided by Themebeez, go to Dashboard > Theme Name > Starter Templates.<br />
✅ Under Starter Templates, you can choose which demo content to import for your website.<br />
✅ Choose your demo by checking live preview.<br />
✅ Keep Themebeez Toolkit plugin along with you till you are using themes made by us.<br />
✅ Feel free to contact Themebeez Support team at ( https://themebeez.com/support/ ) if you need any assistance.</p>
<h4>✨ VIDEO TUTORIAL:</h4>
<p>Watch the video below which will demonstrate how to use Themebeez Toolkit plugin to import demo dummy contents while using our theme.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JvZSZzL0hB4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h4>✨ADDITIONAL FEATURES:</h4>
<p>Themebeez Tookit also adds extra functionality to <a href="https://themebeez.com/themes/orchid-store/" rel="nofollow ugc">Orchid store theme</a> as we have extended simple mega menu functionality in Orchid Store theme via this plugin.</p>
<h4>✨ COPYRIGHT & CREDITS:</h4>
<p>Themebeez Toolkit uses <a href="https://github.com/proteusthemes/one-click-demo-import" rel="nofollow ugc">One Click Demo Import plugin</a> script (C) 2016 ProteusThemes.com Licensed under the <a href="http://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License v2.0</a>.</p>
<p>Themebeez Toolkit is free software, feel free to redistribute it or modify it under the terms of the <a href="http://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License</a> as published by the Free Software Foundation.</p>


Themebeez Toolkit

A essential toolkit for WordPress themes developed by us. Themebeez Toolkit helps you to import dummy demo contents. It also adds extra features & …

Responsive Navigation Block vs Themebeez Toolkit