Menu jumps on mobile

GabrielKoller · March 2017

Hi,

I changed my mobile menu (#Top_bar) to position absolute and made it transparent to get it over the background image (see here [Links visible only for registered users]). The problem is when you scroll down on mobile the menu jumps when the Top_bar .is-sticky due to the positioning (when I change the position back everything works fine).

Do you have any idea to get the menu directly over the background image without the "jumps" when scrolling?

My second question on the same site: When you look at the "IHR ANSPRECHPARTNER" section the text right next to the image has a padding. Is it possible to deactivate this padding on mobile?

thanks in advance

Bryan · March 2017

Hi,

The section wrapper has padding, if you want to disable it add a custom class in the builder to target this specific section.

The menu jumps because all you needed to do is set it to fixed in theme options>header&subheader>header

thanks

GabrielKoller · March 2017

Hi,

just changed it to fixed and nothing changed. The jumps is only on mobile screens.

how should the css code look like? I don't know how to refer to this specific section.

When I just add a class with padding, the section automatically jumps under the image on wide screens.

thanks

Bryan · March 2017

Did you remove the absolute css???

Also try disabling all plugins.

Add a random class so I can target it. just edit the wrapper in the builder.

[Links visible only for registered users]

GabrielKoller · March 2017

Yes I removed it but then the header is black [Links visible only for registered users].

To the padding issue:

I added the class "picturepadding":

.picturepadding{

padding: 0 0 0 50px;

}

To problem is that the text is now under the picture. [Links visible only for registered users]

I think it is because the class is added to the div above the "column_attr clearfix" and when I add the padding with the muffinbuilder it is written directly in the correct div with the style attribute. So I need to refer to the inner div with css but how? [Links visible only for registered users]

I hope you understand it better with all the pictures :-)

thanks

Bryan · March 2017

Hi,

Remove your class and replace it with this one

.picturepadding > div {
    padding: 0 0 0 50px;
}

GabrielKoller · March 2017

Thank you, that was exactly I was looking for !

Do you have any suggestions for the mobile menu issue?

Bryan · March 2017

Sorry no solution for this, and the menu works fine without stutters on our browsers. Maybe view the website when you are not logged in.

GabrielKoller · March 2017

[Links visible only for registered users]

Here is a video of the jump. Same issue on my iPhone :-/

but thanks for your help!

Bryan · March 2017

You told me you removed the absolute css but you did not. This is why it is jumping. Please, next time do as we tell because we just wasted 30min on looking for a solution and the problem was your custom css.

GabrielKoller · March 2017

Yes but I told you when I remove the absolute css the header is black here again the link to the picture: [Links visible only for registered users]

I just figured out that there is an transparent option in Options > Responsive > Header

Now everything works fine :-)

Your support is awesome didn't expected such quick responses, keep on the good work and sorry for any inconvenience this may have caused you X_X

Menu jumps on mobile

Comments

This website uses cookies