On This Page
Documentation
Extended Navigation Block: DOCUMENTATION
Complete reference for installing, configuring, and using all controls in the Extended Navigation Block plugin for WordPress. Free controls are available to everyone. Pro controls require an active license.
Hover Colors
Free
Controls the color of top-level navigation items when a visitor hovers over them. Located in the Hover/Selected tab → Hover Colors panel.
| Control | What it affects |
|---|---|
| Text | Link text and submenu arrow icon color on hover for main nav items |
| Background | Background color of the entire nav item (including arrow) on hover |
| Submenu & Overlay Text Pro | Text color inside dropdown submenus and mobile overlay on hover |
| Submenu & Overlay Background Pro | Background color inside dropdown submenus and mobile overlay on hover |
How it works: Background color applies to the full item area including the dropdown arrow button, not just the link text. This prevents the visual gap that occurs when only the <a> element is styled.
Selected / Active Colors
Free
Controls the color of the currently active page’s nav item. WordPress adds a current-menu-item class to the active item and current-menu-ancestor to any parent items — both are styled by these controls.
| Control | What it affects |
|---|---|
| Text | Link text color for the current page’s nav item and parent ancestors |
| Background | Background color of the current page’s nav item and parent ancestors |
| Submenu & Overlay Text Pro | Text color for current-page items inside dropdown submenus |
| Submenu & Overlay Background Pro | Background color for current-page items inside dropdown submenus |
Hover priority: When a visitor hovers over a selected item, hover colors take precedence over selected colors. This is intentional and mirrors standard UX expectations.
Parent with Submenu Colors
Pro
Hover text and background colors that apply only to top-level items that open a dropdown — plain links that navigate directly to a page are not affected. Located in the Hover/Selected tab → Parent with Submenu Colors panel.
| Control | What it affects |
|---|---|
| Hover Text | Text and arrow icon color on hover for items that have a submenu |
| Hover Background | Background color on hover for items that have a submenu |
Fallback behavior: When these controls are unset, the item falls back to the general Hover Colors. This means you only need to set them if you want a different color specifically for items with a dropdown — they won’t override anything when left empty.
Breakpoint awareness: If all children of a submenu are hidden on a given breakpoint via Responsive Visibility, the parent with submenu hover colors will not apply on that breakpoint — the item is treated as a plain link.
Item Padding
Pro
Controls padding around navigation item links using separate controls for top-level items and submenu items. Located in the Hover/Selected tab → Item Padding panel.
Both controls use the standard WordPress BoxControl with linked/unlinked sides and unit selectors (px, em, rem, %).
Note: Item padding is applied to a wrapper element around each top-level link, not to the <a> tag itself. This ensures the background color covers the full padded area. The link’s own padding is reset to zero to avoid double-spacing.
Gap & Spacing
Pro
Controls the spacing between navigation items using CSS gap on flex containers. Located in the Hover/Selected tab → Item Spacing panel.
| Control | What it affects |
|---|---|
| Main Nav Gap | Space between top-level navigation items |
| Submenu Gap | Space between items inside dropdown submenus. If a Separator Color is set, this value becomes the separator border width instead. |
Submenu Separator
Pro
Adds a styled border between submenu items. When a separator color is set, the Submenu Gap value is repurposed as the separator border width rather than a gap.
For example: set Submenu Gap to 1px and Separator Color to a light grey to get a classic thin-line separator between dropdown items.
Tip: Setting gap to 0 and the separator color gives you flush items separated only by the border line. Setting gap to 8px and a separator color gives you thicker separator bars.
Item Borders
Pro
Full border control for every interaction state at both levels of the navigation. Located in the Hover/Selected tab → Borders panel, which uses a tabbed interface to keep Normal, Hover, and Active settings organized.
Border Control
Each state uses the native WordPress BorderBoxControl — the same component used by core blocks. You can set a single linked border (same color, style, and width on all sides) or unlink sides to control each independently.
| Property | Options |
|---|---|
| Color | Any theme palette color or custom hex/rgba value |
| Style | Solid, dashed, dotted, double, or none |
| Width | Any CSS length unit (px, em, rem, %) |
Border Radius
Each state also includes a BorderRadiusControl — link all four corners to a single value, or unlink to set each corner independently (top-left, top-right, bottom-right, bottom-left).
States Available
| State | Applies to |
|---|---|
| Top-Level Normal | Main nav items at rest |
| Top-Level Hover | Main nav items on hover |
| Top-Level Active | Current page nav item |
| Submenu Normal | Dropdown items at rest |
| Submenu Hover | Dropdown items on hover |
| Submenu Active | Current page dropdown item |
Mobile scoping: Top-level borders are automatically excluded from the mobile overlay so desktop box styles don’t carry into a stacked vertical menu.
Typography Controls
Pro
Five independent typography panels are available — one for each state. All panels include the same set of controls:
| Control | CSS Property |
|---|---|
| Font family | font-family — lists all fonts from your theme and the WordPress Font Library |
| Font size | font-size — uses theme font size presets or custom value |
| Appearance | font-style and font-weight combined |
| Line height | line-height |
| Letter spacing | letter-spacing |
| Decoration | text-decoration (underline, line-through, etc.) |
| Letter case | text-transform (uppercase, lowercase, capitalize) |
The five panels are: Top-Level Hover, Top-Level Active, Submenu Normal, Submenu Hover, and Submenu Active.
Note: Top-Level Normal is the default native WordPress font control.
Mobile Menu
Pro
All mobile menu controls live in the Mobile tab in the Styles panel. Mobile menu styling is completely independent from desktop hover/selected colors — changes to one do not affect the other.
Colors & Text
| Control | What it affects |
|---|---|
| Background | Background color of the full mobile overlay container |
| Top Level Text | Text color for top-level items in the mobile menu |
| Sub Level Text | Text color for sub-level items within the mobile menu |
States Available
| Control | What it affects |
|---|---|
| Top Level Gap | Space between top-level items in the mobile menu |
| Sub Level Gap | Space between sub-level items inside mobile submenus |
| Sub Left Indent | Left indentation applied to sub-level items |
| Sub Right Indent | Right indentation applied to sub-level items |
Close Button
The mobile close button has its own complete set of styling controls. Colors (background and icon/text) are set in the Close Button Colors panel. Border and radius use the native BorderControl (color + style + width with slider) and BorderRadiusControl (per corner or linked) — the same components used throughout the plugin. Margin and padding use the standard BoxControl.
Note: Border color is handled independently from icon/text color to prevent bleed — setting the icon color will not affect the border color.
Responsive Visibility
Pro
Each individual navigation item (link or submenu) has three independent visibility toggles. Access them by selecting the individual nav item in the block editor — not the parent Navigation block — and opening its Settings panel.
| Toggle | Breakpoint | CSS class applied |
|---|---|---|
| Hide on Desktop | ≥ 1025px | cw-hide-desktop |
| Hide on Tablet | 782px – 1024px | cw-hide-tablet |
| Hide on Mobile | ≤ 781px | cw-hide-mobile |
Any combination of the three toggles can be active simultaneously on a single item. This means you can hide an item on just mobile, on both tablet and mobile, or on all breakpoints at once.
Automatic arrow hiding: When all children of a submenu item are hidden on a given breakpoint, the plugin automatically detects this at render time and hides the dropdown arrow on that breakpoint. No ghost arrow, no empty dropdown — the parent item becomes a plain link on that breakpoint.
Important: These toggles are on the individual navigation link or submenu blocks, not on the parent Navigation block. Select the specific item in the block list or by clicking inside the nav block.
Requirements
| Requirement | Minimum | Notes |
|---|---|---|
| WordPress | 6.0+ | Block editor required |
| PHP | 7.4+ | 8.x recommended |
| Theme | Any block theme | Hybrid themes work if they use the Navigation block |
| Page builder | Not required | Plugin works with native block editor only |
Note: This plugin extends the core WordPress Navigation block. It will not add controls to custom nav menus built with page builders like Elementor or Divi.
Installation
Option A — WordPress Admin Upload
Download the plugin
Download the .zip file from WordPress.org (free) or your Codify Werkz account (Pro).
Go to Plugins → Add New
In your WordPress admin, navigate to
Plugins → Add New Plugin
and click
Upload Plugin
Upload the zip file
Choose the downloaded .zip file and click
We process your refund
If eligible, we’ll confirm the refund by email and process it within 1–2 business days. It will appear on your statement within 5–10 business days depending on your bank.
Option B — Manual FTP Upload
Extract the zip file
Unzip the downloaded file to get the codify-extended-navigation-block folder.
Upload via FTP
Upload the folder to /wp-content/plugins/ on your server.
Activate from Plugins screen
In WordPress admin, go to
Plugins
and activate
Extended Navigation Block
Finding the Controls
All controls live in the block editor sidebar under the Styles tab. There are no settings pages or admin menus.
Open the Site Editor
Go to
Appearance → Editor
in WordPress admin.
Select a Navigation block
Click on any Navigation block in your template. Make sure the block is selected (blue outline), not a child block inside it.
Open the Styles tab
In the right sidebar, click the
Styles
tab (paint roller icon). Scroll down to find the Hover/Selected and Mobile tabs.
Tip: If you don’t see the sidebar, click the settings icon (⚙) in the top-right of the editor to show it.
Troubleshooting
Colors not showing in the editor
Make sure you have the Navigation block itself selected, not a child block (like a Navigation Item or Page List). The block outline should be on the outer nav container. If the Styles tab is missing, click the ⚙ icon in the top-right of the Site Editor.
Styles apply in editor but not on the frontend
Make sure you’ve clicked Save in the Site Editor after making changes. The plugin also requires that the page reloads to see frontend styles — they won’t appear live in the editor’s preview if the page hasn’t been saved.
Another theme or plugin’s nav styles are overriding mine
The plugin uses !important on its rules to win specificity battles, but some themes use inline styles which rank higher. If you’re seeing conflicts, open browser DevTools, inspect the affected element, and check which rule is “winning” in the Styles panel.
Mobile menu colors are bleeding into the desktop nav
This should not happen in v1.0.0+. Desktop and mobile styles are independently scoped. If you see this, please contact support with your WordPress and plugin version.
Changelog
v1.1.0
Added item borders (BorderBoxControl — color, style, width per side; BorderRadiusControl — per corner) for 6 states across top-level and submenu items. Added font family control to all typography panels. Added Parent with Submenu Colors (hover text and background, with breakpoint-aware fallback). Added Responsive Visibility per item (hide on desktop, tablet, or mobile independently) with automatic arrow-hiding when all children are hidden on a breakpoint. Mobile spacing now includes Sub Left Indent and Sub Right Indent. Close button border replaced with native BorderControl and BorderRadiusControl.
v1.0.0 — Initial Release
First public release. Includes hover colors (free), selected colors (free), submenu & overlay colors (Pro), item padding (Pro), gap & spacing (Pro), submenu separator (Pro), typography controls for all states (Pro), and full mobile menu styling (Pro).