Our theme offers robust controls over your site’s primary navigation menu, allowing you to create beautiful, responsive menus with hover effects and custom styling.
Accessing Navigation Settings
To configure your primary menu’s appearance, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Main Navigation.
(Note: To actually create and assign the menu links, you must go to Appearance → Menus first).
1. Hover Animation
Make your menu feel interactive and modern by adding a hover effect.
Under the Animation section, find Hover Animation:
- None: The text color simply changes on hover.
- Underline: A smooth animated line will slide under the menu item when a user hovers their mouse over it.
2. Sub Menus & Dropdowns
If your menu has nested items (drop-downs), you can make this visually clear to your visitors.
Under the Sub Menus section:
- Dropdown Indicators: Toggle this switch to ON to display small arrow icons next to any parent menu item that contains a sub-menu. This is a great usability enhancement.
3. Mobile Menu Settings
Control exactly when and how your menu collapses into a “hamburger” style mobile menu for smaller screens.
Under the Mobile Menu section:
- Mobile Breakpoint: Use the slider to define the exact screen width (in pixels) at which the standard desktop menu disappears and the mobile menu toggle appears. If you have a very long menu with many links, you may want to increase this number so it collapses earlier on smaller laptops or tablets.
- Mobile Menu Button Label: You can display text next to the hamburger icon (e.g., “Menu”, “Navigate”). If you only want the icon to show, leave this field completely empty.
4. Design & Styling Options
Scroll down to the Design Options section to customize the colors of your navigation area.
(Note: These options may depend on your chosen Header Layout. For example, if your navigation sits on its own row in Header Layout 3, you can style the background of that row here).
Background
- Solid Color: Choose a flat background color for the navigation bar.
- Gradient: Apply a colorful gradient background.
Font Colors
- Link Color: The color of the top-level menu items.
- Link Hover Color: The color the text changes to when hovered, or the color of the active page item.
Border
- Add a border to the Top or Bottom of the navigation bar. Define the Style, Color, and Width.
5. Navigation Typography
If you want your menu links to stand out from standard paragraph text, open the Typography section.
- Font Size: Use the slider to adjust the size of the top-level navigation links. You can set specific sizes for Desktop, Tablet, and Mobile to ensure perfect readability on all devices.
Saving Your Changes
Once your navigation is styled to your liking, click the blue Publish button at the top of the Customizer.