Home / , / Customizing Header Type 4: Sidebar Header Layout

Customizing Header Type 4: Sidebar Header Layout

593 views

Customizing Header Type 4: Sidebar Header Layout

Header Type 4 in WpResidence offers a unique sidebar layout that sets it apart from traditional horizontal headers. This design provides an excellent opportunity to create a distinctive look for your website while offering ample space for branding and navigation elements. In this comprehensive guide, we’ll explore how to customize Header Type 4 to align with your website’s style and functional requirements.

Understanding Header Type 4 Structure

Header Type 4 in WpResidence features a vertical sidebar layout with the following key elements:

  1. Logo Section: Typically positioned at the top of the sidebar.
  2. Navigation Menu: Vertically aligned below the logo.
  3. Additional Elements: May include user menu, search functionality, and other custom widgets.
  4. Footer Area: Often used for social icons or additional information.

Activating Header Type 4

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

Customizing the Logo Section

The logo in Header Type 4 is prominently displayed at the top of the sidebar. 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_type4 .logo {
padding: 20px;
text-align: center;
}
.header_wrapper.header_type4 .logo img {
max-width: 80%;
height: auto;
transition: all 0.3s ease;
}
.header_wrapper.header_type4 .logo img:hover {
opacity: 0.9;
}

Styling the Navigation Menu

The vertical navigation menu is a key feature of Header Type 4. Customize its appearance with the following CSS:


.header_wrapper.header_type4 #access {
width: 100%;
}
.header_wrapper.header_type4 #access .menu {
padding: 0;
margin: 0;
}
.header_wrapper.header_type4 #access .menu > li {
display: block;
margin: 0;
border-bottom: 1px solid #e0e0e0;
}
.header_wrapper.header_type4 #access .menu > li > a {
padding: 15px 20px;
font-size: 14px;
color: #333333;
text-transform: uppercase;
transition: all 0.3s ease;
}
.header_wrapper.header_type4 #access .menu > li > a:hover {
background-color: #f5f5f5;
color: #0073e1;
}
.header_wrapper.header_type4 #access .menu > li.current-menu-item > a {
background-color: #0073e1;
color: #ffffff;
}

Customizing the User Menu

Adapt the user menu to fit the vertical layout of Header Type 4:


.header_wrapper.header_type4 #user_menu_open {
width: 100%;
background-color: #ffffff;
border-top: 1px solid #e0e0e0;
}
.header_wrapper.header_type4 #user_menu_open a {
display: block;
padding: 10px 20px;
color: #333333;
font-size: 14px;
transition: background-color 0.3s ease;
}
.header_wrapper.header_type4 #user_menu_open a:hover {
background-color: #f5f5f5;
color: #0073e1;
}
.header_wrapper.header_type4 #user_menu_trigger {
display: block;
text-align: center;
padding: 15px 0;
background-color: #0073e1;
color: #ffffff;
}

Adding Custom Elements

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

1. Adding a Search Bar

Incorporate a search bar into the sidebar header using this PHP code in your child theme’s functions.php:


function add_search_to_header_type4() {
echo '<div class="header_type4_search_bar">';
get_search_form();
echo '</div>';
}
add_action('wp_estate_header_4_bar', 'add_search_to_header_type4');

Style it with CSS:


.header_type4_search_bar {
padding: 20px;
}
.header_type4_search_bar input[type="search"] {
width: 100%;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}

2. Adding Social Media Icons

Add social media icons to the footer area of the sidebar with this PHP code:


function add_social_icons_to_header_type4() {
echo '<div class="header_type4_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_4_footer', 'add_social_icons_to_header_type4');

Style the icons:


.header_type4_social_icons {
display: flex;
justify-content: center;
padding: 20px 0;
border-top: 1px solid #e0e0e0;
}
.header_type4_social_icons a {
color: #333333;
font-size: 18px;
margin: 0 10px;
transition: color 0.3s ease;
}
.header_type4_social_icons a:hover {
color: #0073e1;
}

Adjusting Layout and Responsiveness

Ensure your Header Type 4 looks great on all devices with these layout adjustments:


.header_wrapper.header_type4 {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 240px;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.header_wrapper.header_type4 .header_wrapper_inside {
height: 100%;
display: flex;
flex-direction: column;
}
.header_wrapper.header_type4 #access {
flex-grow: 1;
}
@media only screen and (max-width: 992px) {
.header_wrapper.header_type4 {
width: 100%;
height: auto;
position: relative;
}
.header_wrapper.header_type4 .header_wrapper_inside {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.header_wrapper.header_type4 .logo {
padding: 0;
}
.header_wrapper.header_type4 #access {
display: none;
}
.header_wrapper.header_type4 #user_menu_trigger {
padding: 10px;
}
}

Conclusion

Customizing Header Type 4 in WpResidence allows you to create a unique and visually striking sidebar layout that sets your website apart. By leveraging the vertical design, you can create a distinctive navigation experience while showcasing your brand prominently.

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 4 into a standout feature of your WpResidence-powered website. Don’t hesitate to experiment with different styles, colors, and layouts to find the perfect sidebar header design that represents your brand and enhances your site’s usability.