Docs

[fmgrafikdesign]

Hi there, I have a quick question. I adjusted the breakpoint of the mobile menu with media queries, but now the slide-transition from top to bottom is missing in the adjusted area, eg. it still works in the range up to the default 979px but not between 980px and 1199px. Could you tell me the CSS I need to fix this?

Link to site: http://alwis.fmgrafikdesign.de/materialien/
Attached is a video showing the issue.

Best regards and thanks for your support,
Fabian

[fmgrafikdesign]

Attachment exceeded upload size, so here is an external link: https://dl.dropboxusercontent.com/u/11536087/transition.mp4

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.collapsing {transition: all 0.3s ease;}

Cheers!

[fmgrafikdesign]

Hi Friech,

Thanks for your reply! I added the code to the global css, but it still doesn’t work. Can you give me further advice?

Best,
Fabian

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[fmgrafikdesign]

This reply has been marked as private.

[Jade]

Hi Fabian,

Please add this code in the custom JS:

jQuery(document).ready(function($) {
   var menu_breakpoint = 1199;
   $('.s-mobile-collapse a').click(function(e){
      var current_width = $(window).width();
      if(current_width > menu_breakpoint) {
         return true;
      } else {
         e.preventDefault();
         $('ul.sub-menu', $(this).parent() ).each(function(){
            if( $(this).hasClass('mobile-collapsed') ) $(this).removeClass('mobile-collapsed');
            else $(this).addClass('mobile-collapsed');
         });
      }
   });

});

[fmgrafikdesign]

Hi Jade,

Thanks for your reply! I added the code to the global JS in the Customizer, but nothing has changed. The script gets loaded, but it does not trigger on clicking the hamburger-button. Can you give me further advice?

Best,
Fabian

[Paul R]

Hi Fabian,

To fix it, please remove the js code then add this in custom > css

.x-nav-wrap.mobile {
    display:block;
}

.x-nav-wrap.mobile.collapse {
    display:none;
}

Hope that helps.

[fmgrafikdesign]

Hi Paul,

Thank you for your reply! This CSS did the trick. Thank you very much for your support!

Best Regards,
Fabian

[Joao]

Glad to hear it Fabian,

Let us know if you need further help with anything else.

Joao

[Author]

Posts