[wp-trac] [WordPress Trac] #38927: Twenty Seventeen: site navigation to position:fixed too early on front page without header image

[WordPress Trac]

#38927: Twenty Seventeen: site navigation to position:fixed too early on front page
without header image
----------------------------+-----------------------------
 Reporter:  LittleBigThing  |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Bundled Theme   |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:  ui, template    |
----------------------------+-----------------------------
 Twenty Seventeen uses `position: fixed` for the main-navigation when the
 header image/video is scrolled by on larger screens. The fixed position is
 set by adding `.site-navigation-fixed` to the div `.navigation-top` using
 JS. All working smooth, except on the front/blog page when no header
 image/video is set.

 The class `site-navigation-fixed`is set based on the offset of the
 navigation (`headerOffset`) in assets/js/global.js:

 {{{
 if ( isFrontPage && $customHeaderImage.length ) {
         headerOffset = $customHeader.innerHeight() -
 navigationOuterHeight;
 } else {
         headerOffset = $customHeader.innerHeight();
 }
 }}}

 `$customHeaderImage.length`is never 0 since there is always a `div.custom-
 header-image`, even if there is no custom header is set (see template-
 parts/header/header-image.php).

 IMHO, the cleanest fix would be to avoid having a `div.custum-header-
 image` when there is no header image/video set. This is achieved by adding
 a check in template-parts/header/header-image.php before outputting `div
 .custum-header-image`:

 {{{
 <?php if ( has_header_image() || has_header_video() ) : ?>
         <div class="custom-header-image">
                 <?php the_custom_header_markup(); ?>
         </div>
 <?php endif; ?>
 }}}

 Another option would be to check whether `div.custum-header-image` is
 empty based on its html content (including some trimming):
 `$.trim($customHeaderImage.html())`.

 So something like this in assets/js/global.js:

 {{{
 if ( isFrontPage && $.trim($customHeaderImage.html()) ) {
         headerOffset = $customHeader.innerHeight() -
 navigationOuterHeight;
 } else {
         headerOffset = $customHeader.innerHeight();
 }
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38927>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform