Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various sticky header related issues #508

Closed
eri-trabiccolo opened this issue Jun 15, 2017 · 5 comments · Fixed by #517

Comments

@eri-trabiccolo
Copy link
Contributor

commented Jun 15, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 16, 2017

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 {
  1. 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

  2. presscustomizr/hueman-pro-addons#48

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

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2017

@eri-trabiccolo eri-trabiccolo changed the title Boxed layout: header desktop sticky - navbar not full width Boxed layout: header desktop sticky - navbar not full width and various others sticky related issues Jun 23, 2017

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2017

@eri-trabiccolo eri-trabiccolo changed the title Boxed layout: header desktop sticky - navbar not full width and various others sticky related issues Various sticky header related issues Jun 23, 2017

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2017

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

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

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2017

You knew I was about to yelling at you :P

@Nikeo Nikeo closed this Jun 23, 2017

@Nikeo Nikeo added the fixed label Jun 23, 2017

Nikeo added a commit that referenced this issue Jun 23, 2017
added a custom event "header-image-loaded" : partially fixes #508
fix : when the layout is boxed + sticky header on on dekstop, the width of the header should be inherited from the used width (or default one ), and not rely on %.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.