Support Center Visit Demo License manager Buy @ envato

Menu jumps on mobile

GabrielKollerGabrielKoller
in Menu / Mega menu
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


Comments

  • BryanBryan
    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
  • GabrielKollerGabrielKoller
    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
  • BryanBryan
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • GabrielKollerGabrielKoller
    edited March 2017
    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
  • BryanBryan
    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
  • GabrielKollerGabrielKoller
    Thank you, that was exactly I was looking for !

    Do you have any suggestions for the mobile menu issue?
  • BryanBryan
    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
  • GabrielKollerGabrielKoller

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

    but thanks for your help!
  • BryanBryan
    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
  • GabrielKollerGabrielKoller
    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
Sign In or Register to comment.