[RalphParticipant]

Hi there,

the website header scrolls away from screen if I use iPad in portrait mode (landscape is OK) or iPhone.

Would be great to help me and find a solution.

Kindly regards,

Ralph

[RalphParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

That is happening because you have set your padding in px.

px is a absolute measure and 300px will be 300px on every device.

I recommend you setting those padding sizes using % instead of px.

Let us know how it goes,

Joao

[RalphParticipant]

Thank you for your fast response.

There was only one 300px padding – for a fading column

<div class=”x-column x-sm x-1-1″ style=”padding: 0px 0px 0px 300px;

and I changed it now to 15%

<div class=”x-column x-sm x-1-1″ style=”padding: 0px 0px 0px 15%;

without any effect to the scrolling header. I wonder how this padding is connected to the header?

Maybe you misunderstood me.

My problem is that the complete header (logo + mobile button) scrolls away from screen (see pic).

In the meantime I realized that it’s not an issue of iOS, the problem only occurs if the “mobile button” is displayed (and not the complete navigation).

Regards,

Ralph

[ChristopherModerator]

Hi there,

I can’t replicate the issue. Did you manage to fix it?

Thanks.

[RalphParticipant]

No.

Please reduce the width of you browser to the minimum and scroll down to see the effect.

The header (with logo and mobile button) scrolls away from screen and it’s not possible to navigate anymore.

But maybe it’s not a bug, but a feature?

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

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

Hope it helps.

[RalphParticipant]

That’s it! Thank you very much.

Regards,

Ralph

[Paul RModerator]

You’re welcome! 🙂

[RalphParticipant]

In the meantime I realized that this CSS code results in a weired jumping screen when I scroll back to the top of the page. Only if the mobile button is displayed and only on iPad/iPhone. In browser simulation it’s OK.

Do you have any other ideas?

Regards,

Ralph

[RalphParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Ralph,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
    $(window).scroll(function(){
 var scroll = $(window).scrollTop();

if(scroll == 0){
   $('.x-navbar').removeClass('x-navbar-fixed-top');
}
});
});

Then add this in Custom > Edit Global CSS

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap,
.x-navbar .x-container.max.width {
    height: 91px;
}
}

Hope that helps

[RalphParticipant]

Thanks again!

The JS disables the weird screen jumping.

But two more failures came up:

1.
If I scroll down and up again on iOS I see only half of the header sometimes (I have activated to Smooth scroll plugin in addition).

2.
If I add the CSS code additionally to the code you gave me on October 10th the functionality of the mobile button will be limited (the page doesn’t scoll down to make space for the menu).

Any other idea?

Regards,

Ralph

[RadModerator]

Hi Ralph,

1. Which device does the issue appear, it works on my iPad iOS 10, please provide a screenshot 🙂

2. Hmm, what do you mean by it doesn’t scroll. Fixed positioning allows the element to move along as you scroll, but yes, it doesn’t move along while I scroll and that’s because that CSS isn’t there, or not added. Please add that CSS as mentioned from October 10th comment 🙂

Thanks!

[Author]

Posts