Home / , / Customizing Header Type 3: Centered Logo with Side Navigation

Customizing Header Type 3: Centered Logo with Side Navigation

658 views

Customizing Header Type 3: Centered Logo with Side Navigation

Header Type 3 in WPResidence offers a distinctive layout featuring a centered logo flanked by navigation elements on either side. This design creates a balanced and visually appealing header that can effectively showcase your brand while maintaining easy access to navigation. In this comprehensive guide, we’ll explore how to customize Header Type 3 to align with your website’s unique style and functional requirements.

Understanding Header Type 3 Structure

Before diving into customization, it’s essential to understand the structure of Header Type 3:

  1. Left Section: Typically contains part of the primary navigation menu.
  2. Center Section: Houses the logo, prominently displayed in the middle.
  3. Right Section: Often includes the remaining navigation items and user menu.

This balanced structure allows for creative design possibilities while maintaining a functional layout.

Activating Header Type 3

To begin customizing Header Type 3, you first need to 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 “type3” from the available options.
  6. Save your changes.

Customizing the Logo Section

The logo in Header Type 3 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_inside .logo {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.header_wrapper_inside .logo img {
max-height: 60px; /* Adjust based on your logo */
width: auto;
transition: all 0.3s ease;
}
.header_wrapper_inside .logo img:hover {
opacity: 0.9;
transform: scale(1.05);
}

Customizing the Navigation Sections

Header Type 3’s unique layout splits the navigation into two sections. Here’s how to style them:

Primary Navigation Menu

Customize the appearance of your navigation menu with this CSS:


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

User Menu Customization

Style the user menu to complement your header design:


.header_wrapper.header_type3 #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_type3 #user_menu_open a {
color: #333333;
font-size: 14px;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.header_wrapper.header_type3 #user_menu_open a:hover {
background-color: #f5f5f5;
color: #0073e1;
}
.header_wrapper.header_type3 #user_menu_trigger {
background-color: #0073e1;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
}

Balancing the Layout

To ensure a well-balanced layout in Header Type 3, you may need to adjust the widths of each section:


.header_wrapper.header_type3 .header_wrapper_inside {
display: flex;
justify-content: space-between;
align-items: center;
}
.header_wrapper.header_type3 .header_left,
.header_wrapper.header_type3 .header_right {
flex: 1;
}
.header_wrapper.header_type3 .logo {
flex: 0 0 auto;
margin: 0 20px;
}

Adding Custom Elements

Header Type 3’s layout allows for creative additions. Here are some ideas:

1. Adding a Search Bar

Add a search bar to one of the side sections using this PHP code in your child theme’s functions.php:


function add_search_to_header_type3() {
echo '<div class="header_type3_search_bar">';
get_search_form();
echo '</div>';
}
add_action('wp_estate_header_3_bar_right', 'add_search_to_header_type3');

Style it with CSS:


.header_type3_search_bar {
margin-left: 20px;
}
.header_type3_search_bar input[type="search"] {
padding: 5px 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
width: 180px;
}

2. Adding Social Media Icons

Incorporate social media icons with this PHP code:


function add_social_icons_to_header_type3() {
echo '<div class="header_type3_social_icons">';
echo '<a href="#" target="_blank"><i class="fab fa-facebook"></i></a>';
echo '<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>';
echo '<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>';
echo '</div>';
}
add_action('wp_estate_header_3_bar_left', 'add_social_icons_to_header_type3');

Style the icons:


.header_type3_social_icons {
display: flex;
align-items: center;
}
.header_type3_social_icons a {
color: #333333;
font-size: 16px;
margin-right: 15px;
transition: color 0.3s ease;
}
.header_type3_social_icons a:hover {
color: #0073e1;
}

Implementing Responsive Design

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


@media only screen and (max-width: 992px) {
.header_wrapper.header_type3 .header_wrapper_inside {
flex-direction: column;
}
.header_wrapper.header_type3 .logo {
margin: 10px 0;
}
.header_wrapper.header_type3 #access {
width: 100%;
justify-content: center;
}
.header_wrapper.header_type3 #access .menu > li {
margin: 0 5px;
}
}
@media only screen and (max-width: 768px) {
.header_wrapper.header_type3 #access {
flex-direction: column;
}
.header_wrapper.header_type3 #access .menu > li {
margin: 5px 0;
}
.header_type3_search_bar,
.header_type3_social_icons {
margin: 10px 0;
}
}

Conclusion

Customizing Header Type 3 in WPResidence allows you to create a unique and balanced header design that puts your logo at the forefront while maintaining easy navigation access. By leveraging the centered logo layout and flanking navigation sections, you can achieve a professional and visually appealing header that enhances your website’s overall design.

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 3 into a standout feature of your WPResidence-powered 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.