Extending Slider Photos Into Menu Header

[lifestart]

Would there be a way to extend the photos from the slider into the header?

Similar to http://www.theranos.com?

Meaning, the header would only turn white upon scrolling down? Sticky, as it right now, but only once it passes the slider should it change to a white background.

Thanks!

[Veena]

Kindly take backup of main.js(js/main.js) file and pls try the following changes –
Pls remove the lines of code (line nos:) 183 to 191 from the file main.js and paste the below code

$('#header').waypoint(function (direction) {
                    if (direction === "up") {
                        /* Reached the top and hence highlight current page link */
                        $('#primary-menu > ul > li').not(".hover-bg").each(function () {
                            $(this).removeClass('active');
                            MO_THEME.highlight_menu();
                        });
                    $('#header').removeClass("sticky-true");
                    }
                    else {
                        $('header').addClass("sticky-true");
                    }
                }, { offset: 100 });

And include the following custom CSS in themeoptions –

.sticky-true
{
    background: #fff !important;
}
.sticky-wrapper {
position: fixed;
width: 100%;
z-index: 9999;
}
#container, #header {
background: transparent;
}
#header {
background: transparent;
}
#header-info {
border-top: 0;
}

[Author]

Posts