Customizing Header Type 5: Two-Row Header with Info Widgets

Header Type 5 in WpResidence offers a versatile two-row layout that includes space for info widgets, providing an excellent opportunity to display important information or contact details alongside your main navigation. This guide will walk you through customizing Header Type 5 to create a professional and informative header for your real estate website.

Understanding Header Type 5 Structure

Header Type 5 is composed of two main rows:

1. Top Row: Contains info widgets, typically used for contact information or brief announcements.
2. Bottom Row: Houses the logo, primary navigation menu, and user menu.

Activating Header Type 5

To begin customizing Header Type 5, activate it in your WpResidence theme settings:

1. Log into your WordPress admin panel.
2. Navigate to the WpResidence theme options panel.
3. Find the “Header” or “Header Settings” section.
4. Locate the “Header Design Type” or “Logo Header Type” option.
5. Select “type5” from the available options.
6. Save your changes.

Customizing the Info Widgets (Top Row)

The top row of Header Type 5 is designed to display up to three info widgets. Here’s how to set them up and customize their appearance:

Setting Up Info Widgets

In the WpResidence theme options, you’ll find settings for each info widget. For each widget, you can set:

• Icon (using Font Awesome class names)
• First line of text
• Second line of text

To customize these widgets, add the following CSS to your child theme’s style.css:


.header5_top_row {
background-color: #f7f7f7;
padding: 10px 0;
}
.header_5_widget {
display: flex;
align-items: center;
}
.header_5_widget_icon {
font-size: 24px;
color: #0073e1;
margin-right: 10px;
}
.header_5_widget_text_wrapper {
display: flex;
flex-direction: column;
}
.header_5_widget_text {
font-size: 14px;
line-height: 1.4;
}
.header_5_widget_text:first-child {
font-weight: bold;
}


Adjusting Widget Layout

To ensure the widgets are evenly spaced and responsive, add the following CSS:


.header5_top_row .header_5_widget_wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.header5_top_row .header_5_widget {
flex: 1;
min-width: 200px;
margin: 5px 10px;
}
@media (max-width: 768px) {
.header5_top_row .header_5_widget {
flex-basis: 100%;
}
}


Customizing the Main Header (Bottom Row)

Logo Customization

Adjust the logo appearance with the following CSS:


.header_wrapper.header_type5 .logo {
padding: 15px 0;
}
.header_wrapper.header_type5 .logo img {
max-height: 50px;
width: auto;
}


Navigation Menu Styling

Customize the primary navigation menu with this CSS:


.header_wrapper.header_type5 #access {
display: flex;
justify-content: flex-end;
}
.header_wrapper.header_type5 #access .menu > li {
margin: 0 10px;
}
.header_wrapper.header_type5 #access .menu > li > a {
font-size: 14px;
color: #333333;
text-transform: uppercase;
padding: 15px 10px;
transition: all 0.3s ease;
}
.header_wrapper.header_type5 #access .menu > li > a:hover {
color: #0073e1;
}
.header_wrapper.header_type5 #access .menu > li.current-menu-item > a {
border-bottom: 2px solid #0073e1;
}


User Menu Customization

Style the user menu to complement your header design:


.header_wrapper.header_type5 #user_menu_open {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header_wrapper.header_type5 #user_menu_open a {
color: #333333;
font-size: 14px;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.header_wrapper.header_type5 #user_menu_open a:hover {
background-color: #f5f5f5;
color: #0073e1;
}
.header_wrapper.header_type5 #user_menu_trigger {
background-color: #0073e1;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
}


Adding Custom Elements

Header Type 5’s layout allows for additional customizations. Here’s an example of adding a search bar:

Adding a Search Bar

Add this PHP code to your child theme’s functions.php:


function add_search_to_header_type5() {
echo '<div class="header_type5_search_bar">';
get_search_form();
echo '</div>';
}
add_action('wp_estate_header_5_bar', 'add_search_to_header_type5');


Style the search bar with this CSS:


.header_type5_search_bar {
margin-left: 20px;
}
.header_type5_search_bar input[type="search"] {
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
width: 200px;
}


Implementing Responsive Design

Ensure your Header Type 5 looks great on all devices with these responsive adjustments:


@media only screen and (max-width: 992px) {
.header5_top_row {
display: none;
}
.header_wrapper.header_type5 .header_wrapper_inside {
flex-direction: column;
}
.header_wrapper.header_type5 .logo {
margin-bottom: 10px;
}
.header_wrapper.header_type5 #access {
width: 100%;
justify-content: center;
}
}
@media only screen and (max-width: 768px) {
.header_wrapper.header_type5 #access {
flex-direction: column;
}
.header_wrapper.header_type5 #access .menu > li {
margin: 5px 0;
}
.header_type5_search_bar {
margin: 10px 0;
width: 100%;
}
.header_type5_search_bar input[type="search"] {
width: 100%;
}
}


Conclusion

Customizing Header Type 5 in WpResidence allows you to create a professional and informative header that showcases important information while maintaining a clean navigation structure. The two-row layout provides flexibility for displaying contact details or announcements prominently, enhancing user experience and accessibility.

Remember to implement all customizations in a child theme to ensure they persist through theme updates. Regularly test your header on various devices and browsers to guarantee a consistent and user-friendly experience for all visitors.

With the techniques and examples provided in this guide, you’re well-equipped to transform Header Type 5 into a powerful communication tool for your WpResidence-powered real estate website. Don’t hesitate to experiment with different styles, colors, and layouts to find the perfect header design that represents your brand and meets your visitors’ needs.