Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page.
This is the website in progress:
The site I'm trying to emulate is synergymaids.com.
If you visit the second site, you'll notice that the "sticky header" kicks in right away. After some research, I discovered that this behavior is controlled by a section in the main.js file. Despite experimenting with various numbers, I haven't been able to adjust the height at which it activates.
Below is the relevant portion of the main.js file. It seems that modifying some CSS is also necessary, so here's a link to the CSS file: http://pastebin.com/pd3MUCLh
Any assistance regarding this issue would be greatly appreciated.
// init sticky header
jQuery.fn.init_sticky_header = function() {
var sticky_mobile_menu_padding;
var sticky_header_height = 65;
var sticky_top = jQuery('.sticky-header').css('top');
var sticky_start = sticky_top.replace('','') + 50;
var logo = '.sticky-header .logo img.normal_logo';
var not_logo = '.sticky-header .logo img.retina_logo';
var orig_logo_height, orig_logo_width, logo_max_width, width_ratio, calc_width, calc_height,
logo_height, logo_line_height, logo_width, logo_margin_top = 0;
var anchor_scrolling = 0;
jQuery('.sticky-header').css('top', sticky_start+'px');
jQuery('.init-sticky-header').waypoint(function(direction) {
if(direction === "down") {
...
}
});
};