A sticky header, also known as a fixed header, is a navigation bar that remains visible at the top of the screen as users scroll down a webpage. This feature can significantly enhance user experience by providing constant access to navigation and key elements of your real estate website. WPResidence offers built-in functionality to implement and customize a sticky header, allowing you to create a seamless browsing experience for your visitors.

Enabling the Sticky Header

To activate the sticky header feature in WPResidence, follow these comprehensive steps:

1. Log in to your WordPress dashboard
2. Navigate to the WPResidence Options panel (you’ll find this under the Real Estate menu)
3. Click on the ‘Header’ tab to access header-related settings
4. Scroll down until you find the ‘Use Sticky Header?’ option
5. Set this option to ‘yes’ to enable the sticky header functionality
6. Don’t forget to click ‘Save Changes’ at the bottom of the page to apply your new settings

The code controlling this option in the theme’s backend looks like this:


array(
'id' => 'wp_estate_use_sticky_header',
'type' => 'button_set',
'title' => __('Use Sticky Header?', 'wpresidence-core'),
'subtitle' => __('Enable or disable the sticky header feature.', 'wpresidence-core'),
'options' => array(
'yes' => 'yes',
'no' => 'no'
),
'default' => 'no',
),


Customizing the Sticky Header Appearance

Once you’ve enabled the sticky header, you have a variety of options to customize its appearance and behavior. Let’s explore these options in detail:

1. Sticky Header Height

Adjusting the height of your sticky header can help balance visibility and screen real estate:


array(
'id' => 'wp_estate_sticky_header_height',
'type' => 'text',
'title' => __('Sticky Header Height', 'wpresidence-core'),
'subtitle' => __('Sticky Header Height in pixels. Use numbers only', 'wpresidence-core'),
),


To customize this in your child theme, you can add the following CSS to your style.css file:


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


2. Sticky Header Background Color

Choosing the right background color for your sticky header can ensure it stands out without being obtrusive:


array(
'id' => 'wp_estate_sticky_header_background',
'type' => 'color',
'title' => __('Sticky Header Background Color', 'wpresidence-core'),
'subtitle' => __('Pick a background color for the sticky header', 'wpresidence-core'),
'transparent' => false,
),


To implement a custom background color in your child theme, add this to your style.css:


.sticky_header {
background-color: rgba(255, 255, 255, 0.9); /* Adjust color and opacity as needed */
}


3. Sticky Header Font Color

Ensure your navigation text is clearly visible against the sticky header background:


array(
'id' => 'wp_estate_sticky_menu_font_color',
'type' => 'color',
'title' => __('Sticky Menu Font Color', 'wpresidence-core'),
'subtitle' => __('Sticky Menu Font Color', 'wpresidence-core'),
'transparent' => false,
),


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


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


4. Sticky Header Logo

You might want to use a different logo for your sticky header, perhaps a more compact version:


array(
'id' => 'wp_estate_stikcy_logo_image',
'type' => 'media',
'url' => true,
'title' => __('Your Sticky Header Logo', 'wpresidence-core'),
'subtitle' => __('Upload a logo for the sticky header.', 'wpresidence-core'),
),


To implement a custom sticky header logo through your child theme, you can use this code in your functions.php:


function my_custom_sticky_logo($logo_url) {
return get_stylesheet_directory_uri() . '/images/sticky-logo.png';
}
add_filter('wpresidence_sticky_logo', 'my_custom_sticky_logo');


Advanced Sticky Header Customizations

For those looking to take their sticky header to the next level, consider these advanced customization techniques:

1. Smooth Transition Effect

Add a smooth transition effect when the sticky header appears:


.header_wrapper {
transition: all 0.3s ease;
}
.sticky_header {
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.sticky_header.visible {
transform: translateY(0);
}


Pair this CSS with some JavaScript to toggle the ‘visible’ class:


jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".sticky_header").addClass("visible");
} else {
jQuery(".sticky_header").removeClass("visible");
}
});


2. Responsive Sticky Header

Ensure your sticky header looks great on all devices:


@media only screen and (max-width: 768px) {
.sticky_header {
height: 50px; /* Smaller height for mobile devices */
}
.sticky_header .navbar-brand img {
max-height: 40px; /* Adjust logo size for mobile */
}
}


3. Add a Shadow Effect

A subtle shadow can make your sticky header stand out:


.sticky_header {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


4. Highlight Active Menu Item

Make it clear which page the user is on:


.sticky_header .navbar-nav > li.current-menu-item > a {
color: #0073e1; /* Change this to your theme's primary color */
font-weight: bold;
}


Implementing Sticky Header on Specific Pages

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

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

This functionality is controlled by the following code:


$sticky_header_page = get_post_meta($post->ID, 'use_sticky_header', true);
if ($sticky_header_page == "yes") {
$sticky_header_class = ' sticky_header_page ';
}


By leveraging these customization options and advanced techniques, you can create a sticky header that not only enhances navigation but also complements your website’s design. Remember, all customizations should be made through a child theme to ensure they persist through theme updates. The sticky header is a powerful tool in creating a user-friendly real estate website, providing easy access to important navigation elements and maintaining brand visibility throughout the user’s browsing experience.