Page content "jumps" below dropped down navbar on mobile devices

Support
#1

Hello, I’ve found that when the mobile navbar has been dropped down, scrolling the page content behind it causes a “jumping” of such content below the bottom border of the dropped down navbar. Is there a way to prevent this jumping?

#2

Hello @jeremy4,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#3

Yep it’s fondudes.com

#4

Hi again,

I checked your site and I see you’ve made the bar sticky in mobile devices which is not recommended. To fix the issue, please remove the following line of code:

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
}

Hope this helps!

#5

Hi @Nabeel yes I’ve made the navbar sticky on purpose. It’s very nice that way. The problem is that once the navbar is dropped down, the page content jumps below the dropped down navbar upon scrolling. It should simply remain underneath the navbar without jumping.

#6

Hi There,

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Let us know how it goes!

#7

Hello @thai I am about to update from 5.2.5 to 6.0.4 and am seeing the warning “Any customizations you have made to theme files will be lost. Please consider using child themes for modifications.” What does this mean?

#8

Hi There,

“Any customizations you have made to theme files will be lost. Please consider using child themes for modifications.”

  • This means that any of your custom modification in the parent theme’s functions.php file or in any other theme files will be lost. Those custom css in the theme option section is safe by the way.

Hope this helps.

#9

Thanks for explainig that @RueNel. Would robots.txt or .htaccess be affected?

#10

Hi There,

Those files are not affected.

The files will be affected under this directory: wp-content/themes/x.

Regards!

#11

Thank you @thai !

1 Like
#12

Let us know how it goes!

#13

@thai I just updated to 6.0.4 and now the mobile navbar won’t drop down at all… this is a time sensitive matter. What should I do?

#14

Hey There,

You also need to update Cornerstone. At the moment you are using Cornerstone 2.1.7. Update it first to 3.0.4 so that it will be compatible with X 6.0.4.

Please let us know how it goes.

#15

@RueNel and @thai thank you so much. I was getting rather scared there. Well, the mobile navbar is now functional again since the updates of both X and Cornerstone, but the initial problem of the page content “jumping” still persists.

#16

Hi,

I can’t seem to replicate the jumping issue on my end.

See Video - https://www.screencast.com/t/4aGcSa770U9

Can you provide us a video showing the issue.

Thanks

#17

Hi @paul.r the jumping doesn’t seem to occur on a sized down browser window on desktop/laptop. It only seems to be happening on iPhone.

#18

Hi,

I was able to replicate it in an Iphone.

To fix it, you can add the code below in Theme Options > CSS

@media(max-width:767px) {
.x-navbar-wrap {
       position:absolute;
       width:100%;
}
}

Hope that helps.

#19

Hi again @paul.r I’ve added the code, cleared cache, and it still appears to be happening on iPhone.

#20

Hi Jeremy,

I have an iPhone SE and tested your website on my phone and it is working just as the video screencast @paul.r shared.

So you need to clear your phone browser cache or check the website with another phone.

Please consider that the default feature of the mobile menu is that it pushed the content down. The problem you were experiencing was because you added a custom code to have a sticky menu in mobile and the push down feature is not working well on that. That is not a theme problem and a side effect of your customization and outside of our support scope.

I just want to inform that whatever we try to give regarding the customization is an extra try to be helpful here. Thank you for your understanding.