Implementing a Transparent Header in WPResidence

A transparent header can add a sleek, modern touch to your real estate website, allowing your hero images or sliders to shine through. WPResidence offers built-in options to implement a transparent header easily. In this guide, we’ll walk you through the process of setting up a transparent header and customizing it to fit your site’s design.

Enabling the Transparent Header

To enable the transparent header in WPResidence, follow these steps:

1. Navigate to your WordPress dashboard
2. Go to WPResidence Options (Real Estate menu)
3. Click on the ‘Header’ tab
4. Look for the option ‘Global transparent header?’
5. Set this option to ‘yes’
6. Save your changes

Here’s the code that controls this option:


array(
'id' => 'wp_estate_header_transparent',
'type' => 'button_set',
'title' => __('Global transparent header?', 'wpresidence-core'),
'subtitle' => __('Enable or disable the use of transparent header for all pages.', 'wpresidence-core'),
'options' => array(
'yes' => 'yes',
'no' => 'no'
),
'default' => 'no',
),


Customizing the Transparent Header

Once you’ve enabled the transparent header, you can customize its appearance. Here are some key customization options:

1. Logo for Transparent Header

You might want to use a different logo for your transparent header, typically one with a transparent background:


array(
'id' => 'wp_estate_transparent_logo_image',
'type' => 'media',
'url' => true,
'title' => __('Your Transparent Header Logo', 'wpresidence-core'),
'subtitle' => __('Use the "Upload" button and "Insert into Post" button from the pop up window.', 'wpresidence-core'),
),


To set this in your child theme, you can use the following code in your functions.php file:


function my_custom_transparent_logo($logo_url) {
return get_stylesheet_directory_uri() . '/images/transparent-logo.png';
}
add_filter('wpresidence_transparent_logo', 'my_custom_transparent_logo');


2. Menu Font Color for Transparent Header

Adjust the menu font color to ensure it’s visible against your background:


array(
'id' => 'wp_estate_transparent_menu_font_color',
'type' => 'color',
'title' => __('Transparent Header - Top Menu Font Color', 'wpresidence-core'),
'subtitle' => __('Transparent Header - Top Menu Font Color', 'wpresidence-core'),
'transparent' => false,
),


To customize this in your child theme, add this to your style.css:


.header_transparent .navbar-nav > li > a {
color: #ffffff; /* Change this to your desired color */
}


3. Menu Hover Color for Transparent Header

Set a distinct hover color for menu items:


array(
'id' => 'wp_estate_transparent_menu_hover_font_color',
'type' => 'color',
'title' => __('Transparent Header - Top Menu Hover Font Color', 'wpresidence-core'),
'subtitle' => __('Transparent Header - Top Menu Hover Font Color', 'wpresidence-core'),
'transparent' => false,
),


Customize the hover color in your child theme’s style.css:


.header_transparent .navbar-nav > li > a:hover {
color: #0073e1; /* Change this to your desired hover color */
}


Implementing Transparent Header on Specific Pages

While the global setting applies the transparent header to all pages, you might want to use it only on specific pages. WPResidence allows for this level of customization:

1. Edit the page where you want a transparent header
2. Scroll down to the ‘WPResidence Theme Settings’ meta box
3. Look for the ‘Use transparent header?’ option
4. Select ‘Yes’ to enable transparent header for this specific page

This functionality is controlled by the following code:


$header_transparent_page = get_post_meta($post->ID, 'header_transparent', true);
if ($header_transparent_page == "yes") {
$header_transparent_class = ' header_transparent ';
}


Advanced Customization Tips

For more advanced customizations, consider these tips:

1. Background Gradient: Add a subtle gradient to ensure text visibility:


.header_transparent::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
pointer-events: none;
}


2. Scroll-Based Opacity: Implement a JavaScript function to adjust header opacity on scroll:


jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".header_transparent").css("background-color", "rgba(255,255,255,0.9)");
} else {
jQuery(".header_transparent").css("background-color", "transparent");
}
});


Remember to add this script to your child theme’s js file and enqueue it properly.

Implementing a transparent header in WPResidence can significantly enhance your website’s visual appeal. By following these steps and customization tips, you can create a unique and engaging header that complements your real estate website’s design. Always remember to make these customizations in a child theme to ensure your changes persist through theme updates.