Working with the Mobile Header in WPResidence

The mobile header in WPResidence is a crucial component for providing a seamless user experience on smaller screens. This guide will walk you through customizing and optimizing the mobile header for your WPResidence theme.

Understanding the Mobile Header Structure

The mobile header in WPResidence typically consists of three main elements:

1. Mobile logo
2. Mobile menu trigger (hamburger icon)
3. User menu trigger

Customizing the Mobile Header

1. Mobile Logo

To customize the mobile logo, navigate to the WPResidence theme options panel and look for the “Logos & Favicon” section. Here, you’ll find an option to upload a specific logo for mobile devices:


$mobilelogo = esc_html(wpresidence_get_option('wp_estate_mobile_logo_image','url'));
if ($mobilelogo != '') {
print '<img src="'.esc_url($mobilelogo).'" class="img-responsive retina_ready" alt="'.esc_html__('mobile logo','wpresidence').'"/>';
} else {
print '<img class="img-responsive retina_ready" src="'. get_theme_file_uri('/img/logo_mobile.png').'" alt="'.esc_html__('mobile logo','wpresidence').'"/>';
}


To further customize the mobile logo appearance, you can add custom CSS to your child theme’s style.css file:


.mobile-logo img {
max-height: 50px;
width: auto;
}


2. Mobile Menu Trigger

The mobile menu trigger (hamburger icon) can be styled using CSS in your child theme:


.mobile-trigger {
font-size: 24px;
color: #333333;
}
.mobile-trigger:hover {
color: #0073e1;
}


3. User Menu Trigger

Customize the user menu trigger icon with CSS in your child theme:


.mobile-trigger-user {
font-size: 22px;
color: #333333;
}
.mobile-trigger-user:hover {
color: #0073e1;
}


Adjusting Mobile Header Behavior

Sticky Mobile Header

WPResidence allows you to enable a sticky mobile header. This option can be found in the theme options panel under the “Header” section. To programmatically check if the sticky mobile header is enabled, use:


$mobile_header_sticky = esc_attr(wpresidence_get_option('wp_estate_mobile_sticky_header'));
if ($mobile_header_sticky == 'yes') {
// Apply sticky header styles or behaviors
}


Customizing Mobile Header Height

To adjust the height of the mobile header, add the following CSS to your child theme’s style.css:


.mobile_header {
height: 70px; /* Adjust this value as needed */
}


Adding Custom Elements to the Mobile Header

To add custom elements to the mobile header, you can use the ‘wp_estate_mobile_header_after’ action hook in your child theme’s functions.php file:


function add_custom_element_to_mobile_header() {
echo '<div class="custom-mobile-element">Custom Content</div>';
}
add_action('wp_estate_mobile_header_after', 'add_custom_element_to_mobile_header');


Customizing Mobile Menu

The mobile menu can be styled using CSS in your child theme. Here’s an example of how to customize the appearance:


.mobilex-menu {
background-color: #f7f7f7;
}
.mobilex-menu li {
border-bottom: 1px solid #e0e0e0;
}
.mobilex-menu li a {
color: #333333;
font-size: 14px;
padding: 15px 20px;
}
.mobilex-menu li:hover > a {
background-color: #0073e1;
color: #ffffff;
}


Optimizing Mobile Header Performance

To ensure optimal performance of the mobile header:

1. Use appropriately sized images for the mobile logo
2. Minimize the use of complex animations or transitions
3. Leverage browser caching for static assets

Conclusion

Customizing the mobile header in WPResidence allows you to create a user-friendly and visually appealing experience for mobile users. Remember to always make customizations through a child theme to ensure your changes persist through theme updates. With these techniques, you can tailor the mobile header to match your site’s branding and improve overall mobile usability.