Our theme offers a powerful and flexible header builder built directly into the WordPress Customizer. This guide will walk you through setting up and styling your main header.
Accessing the Header Settings
To access the header settings, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Main Header.
1. Header Layout Options
The theme provides predefined layout structures for your header elements (like your logo and navigation menu).
- Header 1: Standard layout with the logo on the left and the navigation menu aligned to the right.
- Header 2: Centered layout where the logo is positioned above the navigation menu.
- Header 3: Split layout with the logo on the left, navigation on the right, and additional space for widgets.
To change your layout:
- Under the Header Layout section, click on the visual representation of the layout you prefer.
- The customizer preview will update immediately.
2. Header Width
You can control how the header container aligns with the rest of your site content.
- Content Width: The header elements align with the maximum width of your site’s main content area. This is the recommended setting for boxed or standard layouts.
- Full Width: The header container stretches edge-to-edge across the screen, ideal for modern, wide-screen designs.
3. Header Widgets
Adding extra functionality to your header is easy using Header Widgets. You can add elements like a search icon or a call-to-action button.
How to add a widget:
- Scroll down to the Header Widgets section.
- You have two widget locations: Left and Right (relative to the navigation menu).
- Click the Add Widget button.
- Choose between available widgets such as Search or Button.
- Customize the widget settings (e.g., button text, link URL).
Widget Separators
If you use multiple widgets, you can add a stylish separator line between them. Under Widgets Separator, choose:
- None: No separator.
- Regular: A straight vertical line.
- Slanted: An angled separator line for a dynamic look.
Device Visibility
You can control exactly where these widgets appear. Use the Device Visibility dropdown to show widgets on all devices, or hide them specifically on mobile, tablet, or both.
4. Design & Styling Options
The Business Interface theme gives you granular control over the colors and styling of the header area.
Scroll down to the Design Options section to access these settings:
Background
Control the background of the entire header area.
- Solid Color: Choose a flat background color.
- Gradient: Create a beautiful color transition.
- Image: Upload a background image for a textured or photographic look.
Font Colors
Customize the text colors within the header:
- Tagline Color: If your site tagline is displayed in the header, change its color here.
- Link Color: The color of standard links and navigation items.
- Link Hover Color: The color links change to when a user hovers over them with their mouse.
Borders
Add definition to your header by applying borders:
- Add borders to the Top or Bottom of the header.
- Define the Style (solid, dashed, dotted), Color, and Width (in pixels).
- Separator Color: If you enabled widget separators above, you can define their exact color here.
Saving Your Changes
Once you are happy with your header configuration, click the blue Publish button at the top of the Customizer to apply the changes to your live site.