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
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 top level 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
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.
Fade hover effects
When this is checked, hover colors and borders fade in and out over 250ms instead of switching instantly. Submenus also fade as they open and close on the frontend. It’s on by default; uncheck it for instant hover changes. The fade is skipped automatically for visitors whose device is set to reduce motion.
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 whem the padding is set to zero to avoid double-spacing.
Item Spacing
Pro
Controls the spacing between navigation items using CSS gap on flex containers. Top-level Spacing is set under Dimensions → Block Spacing. and submenu in Hover/Selected tab → Item Spacing panel.
| Control | What it affects |
|---|---|
| Block Spacing | Block Spacing (Dimensions panel, Free and Pro): space between top level items. |
| Top Level Separator Size | Thickness of the vertical separator line between items, and it only applies once a separator color is set in the Separator Color panel. The separator size is added to the gap, and the line is centered, so a 20px gap with a 2px separator gives 10px of space, the line, then 10px. |
| Submenu Block Spacing | Space between submenu navigation items |
| Submenu Separator Size | Thickness of the horizontal separator line between items, and it only applies once a separator color is set in the Separator Color panel. |
Separator Color
Pro
Sets the color of the separator lines between items. In a horizontal nav, top level separators run vertically between items; in a vertical nav, they run horizontally. Submenu separators run horizontally between dropdown items, including in the mobile overlay menu. Separators don’t appear in the mobile overlay’s top level menu.
Separators are drawn independently of Item Borders, so you can use both together. If a color is set but no Separator Size, the line is 1px.
Tip: For flush items separated only by the line, set the spacing to 0 and choose a separator color and size.
Top Level Full Width
Pro
For vertical navigation menus only. Stretches each top level item to the full width of the menu, so hover and selected backgrounds span the whole row. It has no effect on horizontal menus.
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 | Top level items at rest |
| Top Level Hover | Top level 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 |
| Outer Gap / Padding | Space between the edges of the mobile overlay and the menu items. The close button stays in the corner. |
Close Button
The mobile close button has its own complete set of styling controls. Background, icon/text color, border (color, style, width), radius, margin, padding.
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
Free
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
Install the free version from WordPress.org
In your WordPress admin, go to Plugins → Add New Plugin.
Search for Codify Extended Navigation Block.
Click Install Now, then Activate.
You’ll be taken to Settings → Codify: Extended Navigation Block. You’ll be asked whether you want to share basic, non-sensitive usage data to help improve the plugin. Choose Allow & Continue or Skip. The plugin works the same either way.
Install from a zip file
Go to Plugins → Add New Plugin → Upload Plugin.
Choose the plugin .zip file and click Install Now.
Click Activate Plugin.
Install manually (FTP)
Unzip the plugin file.
Upload the codify-extended-navigation-block folder to /wp-content/plugins/ on your server.
Go to Plugins in your WordPress admin and click Activate under Codify: Extended Navigation Block.
Upgrade to Pro
After purchasing Pro, you’ll receive an email with your license key and a download link for the Pro plugin. Both are also available any time under My Account on codifywerkz.com.
Go to Plugins → Add New Plugin → Upload Plugin, upload the Pro zip file, and click Install Now.
Click Activate Plugin.
When prompted, enter your license key and click Activate License.
You’ll be taken to Settings → Codify: Extended Navigation Block, and all Pro controls are now available in the block sidebar.
Note: When Pro is activated, the free version is deactivated automatically. It’s safe to delete the free version from your Plugins screen. All of your navigation settings are saved in your Navigation blocks and carry over to Pro.
Start a free trial
Try Pro free for 7 days. A credit card or PayPal account is required to start the trial. You won’t be charged until the trial ends, and you can cancel at any time before then.
From inside WordPress: with the free version active, click Start Free Trial under the plugin name on the Plugins screen, or on the plugin’s settings page. Complete the checkout, then follow the prompt to install Pro.
From our website: click Start 7-day Free Trial on the product page. After checkout, you’ll receive your license key and Pro download by email. Install and activate it as described in Upgrade to Pro.
Note: If you cancel before the trial ends, the Pro features turn off and the plugin returns to the free features. Your Pro settings are kept in your blocks, so if you purchase later, everything comes back.
Plugin Settings Page
| Tab | What it’s for |
|---|---|
| Overview | Your plan (Free or Pro) and version, quick-start steps, and links to the product page, documentation, FAQ, and support. |
| Account | Your license, plan, billing, invoices and subscription. Appears after you activate a license, or after you opt in on the free version. |
| Contact Us | Send us a message directly from your WordPress admin. |
| Upgrade | View Pro plans and pricing, start a free trial, or upgrade. |
Note: All styling controls live in the block editor, not on this page. Select a Navigation block and open the Styles tab in the block sidebar.
Moving Pro to another site
To use your license on a different site, go to Settings → Codify: Extended Navigation Block → Account on the old site and click Deactivate License. That frees up the license, and the Pro features turn off on that site. Then activate the license on the new site.
Plugins Screen Links
Under the plugin name on the Plugins screen, you’ll find quick links:
Free version: Start Free Trial (or Get Pro if you’ve already used your trial) and Info.
Pro version: Support and Info.
Note: Info opens the plugin’s settings page.
Finding the Controls
All styling controls live in the block editor sidebar under the Styles tab. A Settings → Codify: Extended Navigation Block page has an overview and links to the docs, FAQ and support.
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, 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.0.0 — Initial Release
Free
- Hover colors: text and background for top level items
- Selected colors: text and background for the current page and its parent items
- Fade hover effects: hover colors, borders, and submenus fade in and out over 250ms (on by default; respects reduced motion)
- Responsive visibility: hide individual items on desktop, tablet, or mobile
- Live preview in the Site Editor
Pro
- Submenu and mobile overlay hover and selected colors
- Parent with submenu hover colors
- Item padding for top level and submenu items
- Submenu block spacing
- Separators: top level and submenu separator lines with their own color and size
- Top level full width for vertical menus
- Item borders: color, style, and width per side, and radius per corner, for normal, hover, and active states
- Typography for hover and selected states: font family, size, appearance, line height, letter spacing, decoration, and letter case
- Mobile menu styling: background, text colors, spacing, submenu indents, outer gap, and fonts
- Close button styling: colors, margin, padding, border, and radius