Header jumping up and down when scrolling


#1

Hello,

I would like to fix the following problem.

On this site https://hti-rvs.nl when i start scrolling the header info disappears and returns after about 20px down only to show with white space above the contact info header.
Here are some screenshots but you can also visit the URL above.

I would like to have it in all instances as seen when you visit the site initially.

Thanks


#2

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-contact {
        position: relative;
        z-index: 9999;
      }
    }

Regards,
Kharis


#3

Hello Kharis,

This code does not change the behavior of the contact header. It only moves the logo up about 20px and is cut off. I’ve taken the code out.
If you have a close look at the link https://hti-rvs.nl/ and scroll very slowly you will see that the contact header scrolls upwards and is out of the screen view. Then when you scroll a little further it reappears but is not flush with the top of the screen.

I would like to have the contact header visible with the menu without it disappearing in and out of view. As it where one block.

Thanks
This is a bit annoying for the website visitors.


#4

Hello there,

Try adding this code:

    @media only screen and (min-width: 992px) {
      .site-header:not(.float-header) .header-wrap {
        margin-top: 43px;
      }
    }

Regards,
Kharis


#5

Hello Kharis,

Thanks for your reply but this does not help. The results remain the same

  1. the header area is now higher
  2. when i school the contact header scrolls up and disappears, then returns with white space above.

I would like to have the contact header and the menu the same on every page and without any movement, just static. see screenshot.

Thanks


#6

Hello there,

Very sorry for miss-understanding. Try this code instead:

    @media only screen and (min-width: 1025px) {
      
      .site-header,  
      .site-header.float-header {
        padding: 20px 0 !important;
      }
      
      .header-contact {
        display: none;
      }
      
      .site-header > .header-contact {
        display: block !important;
        margin-bottom: 5px;
      }
      
      .site-header:not(.float-header) .header-wrap {
          margin-top: 0 !important;
      }  
      
    }

Regards,
Kharis


#7

Thanks Kharis,

Its getting better. The Menu and the header-contact are visible and staying together in view.
However for some reason there is about 112px white space above the header contact. see screenshot.
This is pushing everything downwards covering parts of the content.

I’ve taking the code out for now because this is a live site.
Btw should i also remove the older code that you sent?


#8

Hello there,

Did it permanently happen? Would you please re-apply the code, so I could troubleshoot it.

Regards,
Kharis


#9

Hello Kharis,

I’ll add the code this evening at 19:00hrs Central European time so as not to cause problems for most of the visitors.


#10

Please try adding this extra CSS code:

.page-id-38 .header-clone {
  height: 0;
  display: none;
}

38 is ID number of contact page.

Regards,
Kharis


#11

Hello Kharis,

Thanks for your reply. If i add this code with the previous code still in place the header looks like this. The page content moves to the top and the header is pushed down.

Removing the previous code and just adding the new code the top of the page is under the header. Also the jumping up and down of the content header has returned.

In the previous code that you supplied (below) had at least the advantage that the header wasn’t jumping up and down. I think that maybe this code is going the right way.

  @media only screen and (min-width: 1025px) { .site-header, .site-header.float-header { padding: 20px 0 !important; } .header-contact { display: none; } .site-header > .header-contact { display: block !important; margin-bottom: 5px; } .site-header:not(.float-header) .header-wrap { margin-top: 0 !important; } }

TO make things easier i’ll make a duplicate of the site as to not interfere with its visitors.

The site can be found at this address https://eye-site-hosting.com/

Best regards

Joe