Menu jumps on mobile

GabrielKoller

Hi,

I changed my mobile menu (#Top_bar) to position absolute and made it transparent to get it over the background image (see here http://www.silvii.at/ddm/). 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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

GabrielKoller

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

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.

https://www.w3schools.com/cssref/sel_class.asp

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

GabrielKoller

Yes I removed it but then the header is black http://imgur.com/HlkeWdN.

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. http://imgur.com/ZCqn9KG

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? http://imgur.com/aJQsoQQ

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

thanks

Bryan

Hi,

Remove your class and replace it with this one 

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

GabrielKoller

Thank you, that was exactly I was looking for !

Do you have any suggestions for the mobile menu issue?

Bryan

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

GabrielKoller

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

but thanks for your help!

Bryan

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

GabrielKoller

Yes but I told you when I remove the absolute css the header is black here again the link to the picture: http://imgur.com/HlkeWdN

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