Description
This plugin allows users to add a clean, intuitive navigation feature for both mobile and desktop, enhancing how visitors explore a WordPress site.
Screenshots
The Desktop Navigation 
The Mobile Menu Bar 
The Mobile Navigation Once Opened
Blocks
This plugin provides 1 block.
- Navigation JHAC
Installation
From within WordPress
- Visit ‘Plugins’ > ‘Add New’.
- Search for ‘Navigation JHAC’.
- Activate from your Plugins page.
- Populate the WordPress Menu with the name “JHAC Menu”.
- Output the navigation by using using the “Navigation JHAC” Gutenberg block or the shortcode [nav_jhac_full].
Manually
- Upload the ‘navigation-jhac’ folder to the ‘/wp-content/plugins/’ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Populate the WordPress Menu with the name “JHAC Menu”.
- Output the navigation by using using the “Navigation JHAC” Gutenberg block or the shortcode [nav_jhac_full].
FAQ
-
The plugin is now available as a Gutenberg block, allowing for easy integration into your WordPress pages. However, if you prefer using shortcodes, that option remains fully supported.
To get started, a WordPress menu titled “JHAC Menu” will be automatically created—ready for you to populate. To display the navigation, search for the “Navigation JHAC” block and configure it using the block settings.
To add the navigation via shortcode and display the desktop and mobile menu versions, use: [nav_jhac_full]. If you’d like to place the mobile and desktop navigations in different locations—for example, showing the mobile menu at the top of the header and the desktop menu at the bottom—you can use the following shortcodes: Desktop Navigation: [nav_jhac_des] and Mobile Navigation: [nav_jhac_mob]. You can customise the appearance of the shortcode navigation using the “Nav JHAC” settings page.
Contributors & Developers
“Navigation JHAC” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Navigation JHAC” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.6
- A new menu called “JHAC Menu” is now automatically created during plugin installation. This replaces the previous “Header Menu”.
- Introduced a custom Gutenberg block to render the navigation menu.
- Developed a custom walker class to handle navigation markup, reducing the reliance on JavaScript.
- Added new custom fields for setting desktop and mobile navigation colours.
- Fully tested with WordPress version 6.8.
- Verified compatibility with PHP 8.2.
1.5
- Enabled opacity options for the colours specified.
- Ensured compatibility up to WordPress version 6.1.1.
- Upgraded the method of which the styling is applied to the navigation.
- Extra options added to the settings page.
1.4
- Created option for specifying the text colour.
1.3
- Improved settings page appearance.
- Added functionality to have the mobile menu item fully clickable (not just the arrow) should the target link be empty or contain just “#”.
- Updated the mobile menu so that if the item is an anchor link, the menu will automatically hide when the item is clicked.
- Increased the spacing underneath the mobile menu address.
- Added JSColour Picker onto the plugin settings page.
- Updated settings page icon.
1.2
- Updated plugin page banners.
- Updated centre align field options.
1.1
- Latest WordPress version compatibility improvements.