Header menu not letting me scroll down in Mobile

[NadiaCrisisEquipped]

Hello ,

I just made my header/ top bar sticky on mobile and I realized that when I click to open the header, it won’t allow me to scroll down. Could you test it on your end and help me diagnose what the issue might be?

You can look up https://crisisequipped.com/contact/ on a mobile device please and try to open up the tabs and scroll. For me, it stays stuck.

Here are a few screenshots for reference:

It won’t allow me to scroll beyond this.

Thanks for your time and help!
Nadia

[ruenel]

Hi Nadia,

Thanks for writing in! This issue is happening because of this custom CSS that you may have added:

@media (max-width: 979px){
  .x-navbar-wrap .x-navbar-fixed-top {
    position: fixed;
  }
}

Kindly remove this code and test your site again. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[NadiaCrisisEquipped]

Oh, I see!
I added that code to make the nav bar sticky on mobile. Is there another way to make it sticky while allowing it to scroll at the same time?

Thanks for your help!

[ruenel]

Hi Nadia,

If that is the case, you will need to set a maximum height which usually the 100% view height of the screen and then if there is a content overflow, you have to set it to scroll. Therefore the final code can be:

.x-navbar-wrap .x-navbar-fixed-top {
    position: fixed;
    max-height: 100vh;
    overflow-y: scroll;
}

Note: Be advised that the given code is just an example to get you started with your modifications. You will have to maintain this code whenever there are theme and plugin updates.

For your reference, you can check out these CSS properties here:

• https://www.w3schools.com/cssref/pr_dim_max-height.asp
• https://www.w3schools.com/css/css_overflow.asp

Hope this helps.

[NadiaCrisisEquipped]

Thank you!
I tried what you suggested but I noticed another error occuring and I’m not sure if it’s because of the new code you sent me or something different?

When you go to one of my pages (on mobile), for example: https://crisisequipped.com/disaster-preparedness/
The page will open up normal like this:

But after scrolling a little bit, ALL text disappears and you’re left with a blank screen like this:

Could you help me figure out what is causing the text to disappear?

Thanks so much I appreciate all you’re doing to help me!

[ruenel]

Hi Nadia,

Please remove the height: 100vh; and test your site again.

Kindly let us know if this will work for you.