DigiFusion allows you to customize menu colors for individual pages and posts, giving you complete control over your site’s navigation appearance across different sections.
Accessing Page-Specific Menu Settings
Navigate to the page or post you want to customize in your WordPress admin area. In the page editor, you’ll find the DigiFusion page settings in the sidebar (Gutenberg editor) or in metaboxes below the content area (Classic editor).
Setting Custom Menu Colors
In the DigiFusion page settings panel, locate the Menu Colors section. Here you can customize three different color states:
Normal State: The default color of menu links when not being interacted with.
Hover State: The color menu links change to when a user hovers over them.
Current State: The color for the currently active menu item.
Click on each color picker to select your desired colors. You can use:
- Hex color codes (e.g., #ff0000)
- RGB values
- RGBA values for transparency effects
How Menu Color Inheritance Works
Page-specific menu colors override the theme’s global menu colors only for that specific page. If you don’t set custom colors for a page, it will use the default colors from your theme customizer settings.
The system automatically generates the necessary CSS and applies it only to the pages where custom colors are defined, ensuring optimal site performance.
Supported Menu Elements
The custom menu colors affect:
- Main navigation menu links
- Mobile menu toggle button
- Dropdown menu items (inherits from main menu styling)
- Current menu item indicators
Managing Menu Colors Across Multiple Pages
Each page and post can have its own unique menu color scheme. This is particularly useful for:
- Creating distinct sections on your website
- Matching menu colors to page-specific branding
- Establishing visual hierarchy across different content areas
To remove custom menu colors from a page, simply clear the color values in the page settings and update the page. The menu will then revert to using the global theme colors.