Customizing Header Type 1: Layout and Features

Header Type 1 in WPResidence is a classic, horizontal layout that includes a logo, primary navigation menu, and user menu. This article will guide you through customizing this header type to match your website’s design and functionality needs.

Understanding Header Type 1 Structure

Header Type 1 consists of three main elements:

1. Logo (left-aligned by default)
2. Primary Navigation Menu (center or right-aligned)
3. User Menu (right-aligned)

Activating Header Type 1

To activate Header Type 1, navigate to the WPResidence theme options panel and find the “Header” section. Look for the “Header Design Type” option and select “type1”.

Customizing the Logo

Logo Upload and Placement

1. In the theme options panel, go to the “Logos & Favicon” section.
2. Upload your logo image.
3. Adjust logo size and placement using the following options:
   • Maximum height for the logo
   • Maximum width for the logo
   • Margin top for logo

To further customize logo placement, add the following CSS to your child theme’s style.css file:


.logo img {
max-height: 60px; /* Adjust as needed */
margin-top: 10px; /* Adjust as needed */
}


Logo Alignment

By default, the logo is left-aligned. To change this, you can use custom CSS in your child theme:


.logo {
text-align: center; /* or 'right' */
}


Customizing the Primary Navigation Menu

Menu Alignment

The primary navigation menu alignment can be adjusted in the theme options. Look for the “Main menu alignment for Header Type 1” option. You can choose between left, center, or right alignment.

To override this setting or make fine adjustments, use custom CSS in your child theme:


.navbar-nav {
float: right; /* or 'left' or 'none' for center */
}


Styling Menu Items

Customize the appearance of menu items using CSS in your child theme’s style.css:


.navbar-nav > li > a {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #333333;
text-transform: uppercase;
padding: 10px 15px;
}
.navbar-nav > li > a:hover {
color: #0073e1;
background-color: #f5f5f5;
}


Adding Custom Classes to Menu Items

You can add custom classes to menu items for additional styling or functionality. In your child theme’s functions.php file, add:


function add_custom_class_to_menu_items($classes, $item, $args) {
if($args->theme_location == 'primary') {
$classes[] = 'custom-menu-item';
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_custom_class_to_menu_items', 10, 3);


Then, style the custom class in your child theme’s style.css:


.custom-menu-item > a {
font-weight: bold;
}


Customizing the User Menu

The user menu typically includes login/register options and user account information when logged in.

Styling the User Menu

Customize the user menu appearance with CSS in your child theme:


#user_menu_open {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
#user_menu_open a {
color: #333333;
font-size: 14px;
padding: 10px 20px;
}
#user_menu_open a:hover {
background-color: #f5f5f5;
}


Adding Custom Links to User Menu

To add custom links to the user menu, use the ‘wpestate_user_menu_after’ action hook in your child theme’s functions.php:


function add_custom_user_menu_item($user_id) {
if (is_user_logged_in()) {
echo '<a href="/custom-page/">Custom Link</a>';
}
}
add_action('wpestate_user_menu_after', 'add_custom_user_menu_item');


Adjusting Header Height

To change the overall height of Header Type 1, modify the following option in the theme panel:

• Header Height

You can also fine-tune this using CSS in your child theme:


.header_wrapper {
height: 80px; /* Adjust as needed */
}
.navbar-nav > li > a {
line-height: 80px; /* Match to header height */
}


Adding a Search Bar

To add a search bar to Header Type 1, you can use the ‘wp_estate_header_1_bar’ action hook in your child theme’s functions.php:


function add_search_to_header_1() {
echo '<div class="header-search-bar">';
get_search_form();
echo '</div>';
}
add_action('wp_estate_header_1_bar', 'add_search_to_header_1');


Style the search bar in your child theme’s style.css:


.header-search-bar {
float: right;
margin-top: 20px;
}
.header-search-bar input[type="search"] {
padding: 5px 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}


Implementing Responsive Design

Ensure your Header Type 1 customizations are responsive. Use media queries in your child theme’s style.css:


@media (max-width: 768px) {
.navbar-nav > li > a {
font-size: 12px;
padding: 5px 10px;
}
.logo img {
max-height: 40px;
}
}


Conclusion

Customizing Header Type 1 in WPResidence allows you to create a unique and functional header that aligns with your website’s design. Remember to make all customizations through a child theme to ensure they persist through theme updates. By leveraging CSS, PHP hooks, and theme options, you can tailor Header Type 1 to perfectly suit your needs.