Issues with Header Bar and Slider Image (Especially Mobile)

Hey,

I managed this by editing the sticky header javascript file and adding some custom css.
You basically have to create some kind of placeholder for the header because the header reduces the size of the page when it’s set to the attribute “fixed” as soon as you have scrolled down far enough.

See this tuorial for more help

I can show you the code later if you want.

Cheers

So this is the code I added inside the the jQuery section to the file ascent/includes/js/enable-sticky-header.js:

jQuery("#header-main").wrap('<div class="header-platzhalter")></div>'); //Platzhalter wegen des fixierten Headers
	jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight());

window.onresize = function() {
    jQuery("#header-main").wrap('<div class="header-platzhalter")></div>'); //Platzhalter wegen des fixierten Headers
	jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight());}

Regarding the css code I told you to edit I was wrong since I think there’s no need to do so this way.

Let me now if it works for you.

Greets

Nick

I just realised that you can actually leave out one line of code since it would just create an additional placeholder everytime the site is resized.

So this is the code you should go with:

	jQuery("#header-main").wrap('<div class="header-platzhalter")></div>'); //Placeholder is created
	jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight()); //Placeholder is set to the height of the header

window.onresize = function() {
    jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight());

}

Hi Midatan,

Thanks for all of the help. I added the code to my enable-sticky-header.js file but it did not appear to do anything. I tried both of the code above with no go. Here’s what my file looks like:

/**
 * Theme Enable Sticky Navigation
 * @author Pitabas Behera
 */
jQuery(document).ready(function() {
    function ascentStickyHeader() {
        if (jQuery(window).scrollTop() >= origOffsetY) {
            jQuery('#header-main').addClass('sticky');
            jQuery('#header-main.sticky').css({
                'top': adminbarHeight + 'px'
            });

            var headerSearchFormTopPosition = (adminbarHeight) + (jQuery('.header-bottom').outerHeight());
            jQuery('#header-search-form-wrap').addClass('sticky');
            jQuery('#header-search-form-wrap.sticky').css({
                'top': headerSearchFormTopPosition + 'px'
            });
        } else {
            jQuery('#header-main').removeClass('sticky');
            jQuery('#header-main').css({
                'top': 'auto'
            });
            jQuery('#header-search-form-wrap').removeClass('sticky');
        }
    }

    function wpAdminbarHeight(wpAdminbar) {
        if (jQuery(wpAdminbar).length) {
            var adminbarHeight = jQuery(wpAdminbar).outerHeight(true);
        } else {
            var adminbarHeight = 0;
        }
        return adminbarHeight;
    }
    jQuery(window).on("load resize scroll", function(e) {
        adminbarHeight = wpAdminbarHeight("#wpadminbar");
        if(jQuery(window).innerWidth() > 767) {
            jQuery('#header-main.sticky').css({
                'top': adminbarHeight + 'px'
            });
        } else {
            jQuery('#header-main.sticky').css({
                'top': 0
            });
        }

        var headerSearchFormTopPosition = (adminbarHeight) + (jQuery('.header-bottom').outerHeight());
        jQuery('#header-search-form-wrap.sticky').css({
            'top': headerSearchFormTopPosition + 'px'
        });
    });
    adminbarHeight = wpAdminbarHeight("#wpadminbar");
    var stickyMenu = jQuery('#header-main');
    var origOffsetY = (stickyMenu.offset().top) - (adminbarHeight);
    document.onscroll = ascentStickyHeader;

	jQuery("#header-main").wrap('<div class="header-platzhalter")></div>'); //Placeholder is created
	jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight()); //Placeholder is set to the height of the header

window.onresize = function() {
    jQuery(".header-platzhalter").height(jQuery("#header-main.header-bottom").outerHeight());

}

}); //End jQuery

Thanks!