Jumping menu / Jumping and sliding unstable menu on Mobile

Hello

I have a new website, and I am having some problems with my menu when I view the page on mobile. The menu, when you scroll the page down, jumps, text somethimes slides and jumps.
I don´t know if the problem is because I have scroling text and images.

My website

Thank you for your help,
BR

Hello,

It looks like this code in your additional CSS is causing that (row 287-288):

.site-header.float-header {
	position: fixed !important;

Kind Regards, Roman.
aThemes Support

Thank you for you answer.

I am having the same problem on mobile, on one of my supages - My site

Should I erase the code you mentioned above?

Thank you & Best regards,
BR

Hello, try to remove only this row:

position: fixed !important;

Kind Regards, Roman.
aThemes Support

Thank you Roman

I did it, and it is a bit better. But somethimes the menu dissapears (mobile view). The problem with jumping menu bar and sliding menu text still remains on my subpage, so the problem is probably still there.

My subpage

This happens on my mobile view.

Thank you for your help & Best regards,
BR

Hello,

I have just checked that subpage and saw that your top Elementor section has -110px of top margin, this seems to cause your mobile menu problem, so you can try to remove that negative margin (on mobile view only, Elementor allows it) and see if it helps. Also please clear your browser cache to make sure that you see actual layout.

Kind Regards, Roman.
aThemes Support

I have done that. I removed the Top Margin on my Mobile view, but then there is a white space betwen my header menu and the top picture. I have set -30 on top margin because I wanted to have no white space above my top picture.

Thank you for your help & Best regards,
BR

Okay, you are welcome!

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

I checked the site again and the problem is still there. And I don´t want to have any white space between the menu and the picture (I used negative top margin on all my subpages, so I don`t have that white space between the menu bar and the picture).

I think that the problem is probably due many sliding objects on my mobile view, the text is sliding from left and right.

When, on my Mobile, I view my subpages that have sliding text from the side I notice also, that the mobile view is no longer mobile view, because you can scroll left and right; on supages like:

My subpage
My subpage
My subpage

So I think that probably to have a stable menu bar, I should avoid using sliding text from the side, instead I should probably use it from bottom.

Or is there another way to have a stable menu bar?

Thank you & Best regards,
BR

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1024px) {
    #masthead {
        position: absolute !important;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Inserted the code and it does not change on my supage:

My subpage

Thank you & Best regards,
BR

I changed all the Motion effects on my Mobile Entrance animation:

Changed from:
Fade in Left / Right
to:
Fade in Up

And the menu bar is not jumping now.

I think if you have too many Entrance animation on Mobile from side than the menu bar is jumping. For now I will leave it like this.

Thanks for your help& Best regards,
BR

You are welcome, and thank you for sharing that!

Kind Regards, Roman.
aThemes Support

Roman, thank you for your help. By testing, we get better :slight_smile:

Thank you & Best regards,
BR

1 Like