Various sticky header related issues
eri-trabiccolo opened this issue · comments
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/
Here's some ideas:
- 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 {
-
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 -
https://github.com/presscustomizr/hueman-pro-addons/issues/48
-
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 */
}
I think 1. is related to this issue:
https://secure.helpscout.net/conversation/385212490/28876/?folderId=607541
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.
You knew I was about to yelling at you :P