Home / , / Customizing Header Type 5: Two-Row Header with Info Widgets

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

269 views

Customizing Header Type 6: Three-Column Header Layout

Header Type 6 in WpResidence offers a unique three-column layout that provides ample space for navigation elements and branding. This design allows for a balanced and visually appealing header that can effectively showcase your main menu, logo, and additional navigation or user elements. In this guide, we’ll explore how to customize Header Type 6 to create a distinctive and functional header for your real estate website.

Understanding Header Type 6 Structure

Header Type 6 is composed of three main columns:

  1. Left Column: Typically contains the primary navigation menu.
  2. Center Column: Houses the logo, prominently displayed in the middle.
  3. Right Column: Often includes a secondary menu, user menu, or other functional elements.

Activating Header Type 6

To begin customizing Header Type 6, 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 “type6” from the available options.
  6. Save your changes.

Customizing the Logo (Center Column)

The logo in Header Type 6 takes center stage. Here’s how to customize it:

Logo Upload and Sizing

  1. In the WpResidence theme options, go to “Logos & Favicon.”
  2. Upload your logo image (preferably a PNG or SVG for best quality).
  3. Adjust the following settings:
    • Maximum height for the logo
    • Maximum width for the logo
    • Margin top for logo

Fine-tune your logo’s appearance with this CSS in your child theme’s style.css:


.header_wrapper.header_type6 .logo {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.header_wrapper.header_type6 .logo img {
max-height: 60px;
width: auto;
transition: all 0.3s ease;
}
.header_wrapper.header_type6 .logo img:hover {
opacity: 0.9;
}

Customizing the Primary Navigation (Left Column)

Style the primary navigation menu in the left column with this CSS:


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

Customizing the Secondary Navigation and User Menu (Right Column)

Style the secondary navigation and user menu in the right column:


.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu .menu > li {
margin-left: 20px;
}
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu .menu > li > a {
font-size: 14px;
color: #333333;
text-transform: uppercase;
padding: 10px 0;
transition: all 0.3s ease;
}
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu .menu > li > a:hover {
color: #0073e1;
}
.header_wrapper.header_type6 #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_type6 #user_menu_open a {
color: #333333;
font-size: 14px;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.header_wrapper.header_type6 #user_menu_open a:hover {
background-color: #f5f5f5;
color: #0073e1;
}

Adding Custom Elements

Header Type 6’s layout allows for additional customizations. Here’s an example of adding a search bar to the right column:

Adding a Search Bar

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


function add_search_to_header_type6_secondary_menu($items, $args) {
if($args->theme_location == 'header_6_second_menu') {
$items .= '<li class="menu-item-search">';
$items .= get_search_form(false);
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_search_to_header_type6_secondary_menu', 10, 2);

Style the search bar with this CSS:


.header_wrapper.header_type6 .menu-item-search {
display: flex;
align-items: center;
}
.header_wrapper.header_type6 .menu-item-search .search-form {
margin-left: 20px;
}
.header_wrapper.header_type6 .menu-item-search .search-form input[type="search"] {
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
width: 200px;
}

Implementing Responsive Design

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


@media only screen and (max-width: 992px) {
.header_wrapper.header_type6 .header_wrapper_inside {
flex-direction: column;
}
.header_wrapper.header_type6 .logo {
order: -1;
margin-bottom: 20px;
}
.header_wrapper.header_type6 .wpresidence_header_6_firs_menu,
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu {
width: 100%;
justify-content: center;
}
.header_wrapper.header_type6 .wpresidence_header_6_firs_menu .menu > li,
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu .menu > li {
margin: 0 10px;
}
}
@media only screen and (max-width: 768px) {
.header_wrapper.header_type6 .wpresidence_header_6_firs_menu,
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu {
flex-direction: column;
}
.header_wrapper.header_type6 .wpresidence_header_6_firs_menu .menu > li,
.header_wrapper.header_type6 .wpresidence_header_6_secondary_menu .menu > li {
margin: 5px 0;
}
.header_wrapper.header_type6 .menu-item-search {
margin-top: 10px;
}
.header_wrapper.header_type6 .menu-item-search .search-form input[type="search"] {
width: 100%;
}
}

Customizing Header Type 6 in WpResidence allows you to create a unique and balanced header design that effectively showcases your main navigation, branding, and additional functional elements. The three-column layout provides flexibility and visual appeal, enhancing user experience and site navigation.

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 6 into a standout feature of 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 enhances your site’s usability.