[DonWattzParticipant]

So my page is jumping whenever i scroll down on mobile. I have used iphone 6+ using chrome to test. Please let me know how to stop it.

I think the background image is getting bigger on scroll. Try scrolling it slowly.

also on desktop, when you load the page the menu is in one spot but when you scroll it jumps..

http://88b.b0f.myftpupload.com/

[RadModerator]

Hi Don,

Thanks for writing in.

It’s because of this CSS,

.masthead-inline .x-navbar, .masthead-inline .x-navbar .sub-menu, body.x-navbar-fixed-top-active .x-navbar-wrap {
    background-color: transparent !important;
    position: absolute;
    width: 100%;
}

You’re setting the navbar, the sub-menu, and the wrapper to absolute positioning, it shouldn’t. Your navbar isn’t moving as your scroll and jump because you’re forcing it to absolute positioning instead of fixed positioning.

Please remove that 🙂

Thanks!

[DonWattzParticipant]

So I want to have my page looking like it does now and if I remove that code it won’t. Any suggestions on how to achieve this look without that code?

[Nabeel AModerator]

Hi again,

Try replacing your code with this one:

.masthead-inline .x-navbar {
    background: transparent !important;
}
.x-main.full {
    margin-top: -50px !important;
}

Let us know how this goes!

[DonWattzParticipant]

It worked on desktop but not mobile.

[DonWattzParticipant]

Also that makes the logo and nav stick to the top when scrolling.

[RadModerator]

Hi there,

Fixed positioning is intentionally disabled for mobile. Please change this CSS

.masthead-inline .x-navbar {
    background: transparent !important;
}
.x-main.full {
    margin-top: -50px !important;
}

to this

.masthead {
height: 0px;
}
.x-navbar {
    background-color: transparent !important;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100000;
}

But make sure to remove the CSS I recommended above. I checked and it still there.

Cheers!

[DonWattzParticipant]

Fixed the mobile issue but the background still enlarges and the header is sticky. See linked video.

https://dl.dropboxusercontent.com/u/104704740/Scrolling%20Issue.mov

[JoaoModerator]

Hi There,

I belive that is hapenning because you have a skewed section after the banner image and you have set the size of your banner to min-height: 100vh so there is a “conflict” on the code that is leading the image to change size.

You could try having the very top of the first section below the banner image without skew and like that your banner image would take 100% of the VH without the little gap I can notice on desktop and probably this jump won´t happen. I believe in terms of design it will still look good and give you the desired effect.

Let us know how it goes.

Thanks

Joao

[DonWattzParticipant]

unfortunately that did not work….

[DonWattzParticipant]

i think i narrowed it down to the issue being that on ios, the url address bar disappears thus making the screen size different.

[LelyModerator]

Hi There,

Glad you were able to figure this out.

Cheers!

[Author]

Posts