Support » Theme: Twenty Seventeen » Header video doesn’t cover viewport height

  • Resolved picaporte

    (@picaporte)


    Hi there,

    I wanted to change the navigation bar position and styling after scrolling:

    – Position fixed on top (over the video), menu right aligned, with transparent background and font color #fff. Added Css:

    @media only screen and (min-width: 48em) {
    .navigation-top {
      top: 0px;
      background: transparent;
      height: 50px;
      position: fixed;
      border: none;
    }}
    
    @media only screen and (min-width: 48em) {
    .main-navigation a {
        color: #fff;
    }
    }
    
    @media only screen and (min-width: 48em) {
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        color: #fff;
    }
    }
    
    .site-header .menu-scroll-down {
    	display: none;
    }
    
    @media only screen and (min-width: 48em) {
    .main-navigation ul {
    	    text-align: right;
    }
    }

    Changes on scroll: as the content area background color is also #fff, i changed font color to grey, background semi transparent white, and i also wanted to display a logo variation which fit the navigation bar height.

    The main point: this change should have effect after the header video is completely scrolled, as it initially covers the entire screen (100vh), so the navigation bar changes when entering the content area. To achieve this i have used this javascript snippet:

    $(window).scroll(function(){
     var scroll = $(window).scrollTop();
     var headerHeight = $(".site-header").outerHeight();
    	
       if (scroll > headerHeight) {
         $(".navigation-top").css({"background":"rgba(255,255,255,0.7)", "z-index":"9999", "border-bottom":"1px solid #bbb", "backgroundImage":"url(http://www.picaporte.5gbfree.com/wp-content/uploads/2018/05/logo-menu.png)", "background-repeat":"no-repeat", "background-position":"left center"});
         $(".main-navigation a").css({"color":"#333"})
       }
    
       else{
         $(".navigation-top").css({"background":"transparent", "border":"none", "backgroundImage":"none"});
         $(".main-navigation a").css({"color":"#fff"})
       }
      })
     
    })( jQuery );)

    It works perfectly regarding the nav bar desired changes, but

    The problem: all header elements cover the entire viewport height for each screen size, but the video, so that we can see an ugly grey area below the video. Video .wp-custom-header and video #wp-custom-header-video elements height is always smaller than that of the rest of header elements (100% viewport height).

    As long as I barely know something of javascript programming, I cannot figure out how to solve this problem (and what is causing it), although i know for sure there’s something wrong with the javascript code. Note: i know that using addClass for Css changes would probably be the right way, but for now i have focused on this main problem.

    Can any merciful soul give me a helping hand?
    Thanks in advance!

    • This topic was modified 3 years, 6 months ago by picaporte.
    • This topic was modified 3 years, 6 months ago by picaporte.

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is this only an issue on a certain viewport? I couldn’t see an ugly grey area below the video on my laptop.

    Thread Starter picaporte

    (@picaporte)

    @anevins
    Hi Andrew, thanks for your prompt response.

    No, it seems to happen with all viewports, but it is a bit tricky: working with my laptop (1280×800) it looks right, it’s also ok within the customizer for this screen size, not for the cell and tablet screen sizes. I also use an online size testing service (testsize (dot) com) and all screen sizes there show the grey band below the video.

    • This reply was modified 3 years, 6 months ago by picaporte.
    Thread Starter picaporte

    (@picaporte)

    Just another tip, if it could help: i’ve noticed that the .wp-custom-header element has no height at all (0) when using the original Twenty Seventeen template, after the javascript it has height; and the #wp-custom-header-video element has originally some Css properties that disappear with the js snippet.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Would you be able to show a screenshot of the issue?

    Thread Starter picaporte

    (@picaporte)

    Andrew, as I’m using a test site for support purposes I can create an admin level wp user for you, so you can check it from the bone, if you want. Just give me an email to send you the access info.

    • This reply was modified 3 years, 6 months ago by picaporte.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m afraid I cannot, support here must remain in the forums.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you create a screenshot of the issue on a service like Imgur and link us to that? I’m having a hard time trying to replicate the problem and a screenshot will show me what to look for.

    Thread Starter picaporte

    (@picaporte)

    Ok Andrew, I’ll prepare some screenshots, sure. Thank you.

    Thread Starter picaporte

    (@picaporte)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you check if this is an issue on the demo site? I think the problem may only persist on devices that don’t fully support the VH CSS measurement.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thread Starter picaporte

    (@picaporte)

    Ok, I’ve been testing some things:

    https://2017.wordpress.net/
    I think this is an official demo site for 17 theme w/ video header:
    – Settings seem to be those of the default 17 theme.
    – Checked the video size: 1920×1080, 3.69MB. I’ve downloaded it to test it later with my test site.
    – Video covers the viewport at any screen size. It looks right with Firefox and MS Edge, but weirdly the video doesn’t run (black screen, no background image) with Chrome in my laptop (but it does correctly in an old desktop w/ XP!!). It’s also ok tested w/ testsize (dot) com.

    My Test Site:
    – Revert all settings and code back to default.
    – Test w/ the original video you know (it is 1280×720): same grey area below video with any screen size in WP Customiser, Firefox, Edge and Testsize (dot) com. Chrome in my laptop doesn’t run the video, old XP desktop runs the video w/ the grey area again.
    – Test the original video, 1920×1080 size: same result, grey area.
    – Test the downloaded video from 2017.wordpress.net: same result as above 🙁

    My laptop runs windows 10 fully updated and the browsers are also updated, so there shouldn’t be problems with vh, besides the WP 17 demo site works right. It all sounds an X file.

    So you see my Test Site video rightly covering the viewports in your devices?

    • This reply was modified 3 years, 6 months ago by picaporte.
    • This reply was modified 3 years, 6 months ago by picaporte.
    Thread Starter picaporte

    (@picaporte)

    Ok Andrew, think I have the clue about the issue: it is caused by the child theme.

    Playing around i first disabled all plugins with no + result, then I came up with the idea to revert everything to default, so i changed themes to the original 17 template and voilà! any video i tried fits perfectly in its viewport at any screen size in WP Customiser, browser and Testsize.

    By now you can see the Test Site video running appropriately for all screen sizes, using the original 17 theme template.

    To create a child theme I always use the Child Theme Configurator plugin, I never had any problem with it, so is there anything special to be considered about 17 theme child themes?. I’m gonna try other plugin and see if it works.

    Holy cow, I was getting mad!

    I’ll let you know if it works with other plugins.
    Tx

    Thread Starter picaporte

    (@picaporte)

    Well, it seems that we’re finally done, Andrew. Let’s see:

    – The child theme somehow got corrupted after applying the javascript snippet, so even getting back to the default theme settings there was the gap (the grey area) between header parent elements and header video elements. That happened to different wp installations, both local and online.

    – Deleting the child theme and creating a brand new one set things in place, in terms of the video stretching to cover the full viewport area at any screen size.

    – Again, using the same javascript snippet causes the grey gap (besides of risking a new file corruption, this time it didn’t happen at first), so definitely it’s not the one to use.

    – So, to achieve the effect I want for the nav bar on scroll, I noticed that in the original global.js file there’s already a rule to set the nav bar style when the scroll is more than the custom header, so I only had to add there the couple of specific conditions I need for the nav bar to change in the way I want.

    – Up to now it’s working well and apparently there’s no side effects. I have to test it in deep and adjust some minor things, but I hope things are going ok this time.

    – Finally, I haven’t modified the Test Site (i tested it locally), but if you want to see the changes running let me know and I’ll be happy to arrange the Test Site for you.

    Thank you very much for your time and help.

    • This reply was modified 3 years, 6 months ago by picaporte.
Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Header video doesn’t cover viewport height’ is closed to new replies.