WPResidence offers extensive options for customizing the colors and styles of your website’s header. This guide will walk you through the process of modifying various header elements to create a unique and cohesive look for your real estate website.

Accessing Header Color Options

To begin customizing your header colors:

1. Log into your WordPress dashboard
2. Navigate to WPResidence Options (under the Real Estate menu)
3. Click on the ‘Header Design & Colors’ tab

Customizing Main Header Colors

Start with the main header background and font colors:


array(
'id' => 'wp_estate_header_color',
'type' => 'color',
'title' => __('Header Background Color', 'wpresidence-core'),
'subtitle' => __('Pick a background color for the header.', 'wpresidence-core'),
'transparent' => false,
),
array(
'id' => 'wp_estate_menu_font_color',
'type' => 'color',
'title' => __('Top Menu Font Color', 'wpresidence-core'),
'subtitle' => __('Pick a font color for the top menu.', 'wpresidence-core'),
'transparent' => false,
),


To apply these colors in your child theme, add to style.css:


.header_wrapper {
background-color: #your_chosen_color;
}
.navbar-nav > li > a {
color: #your_chosen_font_color;
}


Styling Menu Hover and Active States

Customize the appearance of menu items when hovered or active:


array(
'id' => 'wp_estate_top_menu_hover_font_color',
'type' => 'color',
'title' => __('Top Menu Hover Font Color', 'wpresidence-core'),
'subtitle' => __('Pick a hover font color for the top menu items.', 'wpresidence-core'),
'transparent' => false,
),
array(
'id' => 'wp_estate_active_menu_font_color',
'type' => 'color',
'title' => __('Active Menu Font Color', 'wpresidence-core'),
'subtitle' => __('Pick a font color for the active menu item.', 'wpresidence-core'),
'transparent' => false,
),


Implement these styles in your child theme:


.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #your_chosen_hover_color;
}
.navbar-nav > .current-menu-item > a {
color: #your_chosen_active_color;
}


Customizing Dropdown Menu Colors

Style the dropdown menus to match your design:


array(
'id' => 'wp_estate_menu_item_back_color',
'type' => 'color',
'title' => __('Dropdown Menu Background Color', 'wpresidence-core'),
'subtitle' => __('Pick a background color for dropdown menus.', 'wpresidence-core'),
'transparent' => false,
),
array(
'id' => 'wp_estate_menu_items_color',
'type' => 'color',
'title' => __('Dropdown Menu Item Font Color', 'wpresidence-core'),
'subtitle' => __('Pick a font color for dropdown menu items.', 'wpresidence-core'),
'transparent' => false,
),


Apply these styles in your child theme:


.navbar-nav .dropdown-menu {
background-color: #your_chosen_background_color;
}
.navbar-nav .dropdown-menu > li > a {
color: #your_chosen_font_color;
}


Styling the Sticky Header

If you’re using a sticky header, customize its appearance:


array(
'id' => 'wp_estate_sticky_header_color',
'type' => 'color',
'title' => __('Sticky Header Background Color', 'wpresidence-core'),
'subtitle' => __('Pick a background color for the sticky header.', 'wpresidence-core'),
'transparent' => false,
),
array(
'id' => 'wp_estate_sticky_menu_font_color',
'type' => 'color',
'title' => __('Sticky Header Font Color', 'wpresidence-core'),
'subtitle' => __('Pick a font color for the sticky header menu items.', 'wpresidence-core'),
'transparent' => false,
),


Implement these styles in your child theme:


.sticky_header {
background-color: #your_chosen_sticky_background;
}
.sticky_header .navbar-nav > li > a {
color: #your_chosen_sticky_font_color;
}


Advanced Styling Techniques

For more advanced customization, consider these techniques:

1. Gradient Background

Create a gradient background for your header:


.header_wrapper {
background: linear-gradient(to right, #start_color, #end_color);
}


2. Transparent Header

Implement a semi-transparent header:


.header_wrapper {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
}


3. Custom Border Styles

Add custom borders to your header elements:


.navbar-nav > li > a {
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}
.navbar-nav > li > a:hover {
border-color: #your_chosen_color;
}


4. Responsive Color Changes

Adjust colors for different screen sizes:


@media only screen and (max-width: 768px) {
.header_wrapper {
background-color: #mobile_background_color;
}
.navbar-nav > li > a {
color: #mobile_font_color;
}
}


By leveraging these color and style customization options, you can create a unique and branded header that perfectly matches your real estate website’s aesthetic. Remember to always implement these changes in a child theme to ensure they persist through theme updates.