Various sticky header related issues

[eri-trabiccolo]

Problem:
on load when the page layout is boxed the navbar desktop sticky is not full-width.
Generally is not good that it the navbar in this situation needs the document to be ready to look fine.

The problem is even more evident when we have an header image, as in that case the "stickify" sometimes is not triggered on document ready.

That's what happens to the two users reporting this bug at the following link:
https://wordpress.org/support/topic/navbar-not-full-width-until-scroll/

[eri-trabiccolo]

Here's some ideas:

1. make sure to react on header image loaded:
   What can happen is that, for long pages, the header image is loaded before we execute the bind callback, so (as we do in the smartLoad plugin):
   replace from: https://github.com/presscustomizr/hueman/blob/v3.3.12/assets/front/js/_parts/_main_userxp_2_stickify.part.js#L56
   to:
   https://github.com/presscustomizr/hueman/blob/v3.3.12/assets/front/js/_parts/_main_userxp_2_stickify.part.js#L60

with:

var $_header_image = $('#header-image-wrap').find('.site-image');
if ( 1 == $_header_image.length ) {
      $_header_image.load( function( img ) {
            czrapp.$_header.css( { 'height' : czrapp.$_header.height() }).addClass( 'fixed-header-on' );
      } );

      //http://stackoverflow.com/questions/1948672/how-to-tell-if-an-image-is-loaded-or-cached-in-jquery
      if ( $_header_image[0].complete ) {
            $_header_image.load();
      }
} else {

2. The desktop sticky header, since it's fixed positioned by the start
   https://github.com/presscustomizr/hueman/blob/v3.3.12/assets/front/css/_parts/0_4_header.css#L425
   , has to have also a width that fits the box:
   So this:
   https://github.com/presscustomizr/hueman/blob/v3.3.12/assets/front/css/_parts/0_4_header.css#L431
   should be:
   .boxed .desktop-sticky { width: 1380px }
   same here (dynamic):
   https://github.com/presscustomizr/hueman/blob/v3.3.12/functions/dynamic-styles.php#L90

3. https://github.com/presscustomizr/hueman-pro-addons/issues/48

4. header responsiveness:
   in certain viewports some elements (with padding) might overflow the header making the horizontal scrollbar appear.
   Eg.
   

because of:
.pad { padding: 30px 30px 20px; }

So I propose to change this:

/* ------------------------------------------------------------------------- *
 *  Logo and tagline on top of a banner image
/* ------------------------------------------------------------------------- */
#header-image-wrap .central-header-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: calc( 100% - 50px );
}

to:

/* ------------------------------------------------------------------------- *
 *  Logo and tagline on top of a banner image
/* ------------------------------------------------------------------------- */
#header-image-wrap .central-header-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box; /* vendor's prefixes needed */
}

[eri-trabiccolo]

I think 1. is related to this issue:
https://secure.helpscout.net/conversation/385212490/28876/?folderId=607541

[eri-trabiccolo]

and this too:
https://secure.helpscout.net/conversation/385739719/28921/?folderId=607541

[eri-trabiccolo]

When displaying an header image and the mobile menu is not sticky we have this:

because of this:
https://github.com/presscustomizr/hueman/blob/v3.3.12/assets/front/css/_parts/0_4_header.css#L370

But even when the mobile menu is sticky, pushing down the #header-image-wrap will result in overlapping the #page of 50px, hiding whatever is placed in that space.

[eri-trabiccolo]

You knew I was about to yelling at you :P