Mobile menu dropdown gets cut off

Hi There, I am having an issue where on mobile devices, the dropdown menu for my services gets cut off at the bottom and you can’t see the last two menu items and you can’t scroll to see them either. Please help

https://projects.website.mashtrust.org.nz

Regards,

Makho

Hello Makho,

To avoid unscrolled mobile menu when the items are long, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
  jQuery(function($) {

    $(window).on('load resize', function() {
    
      var hW          = $(window).height();
      var hNavbar     = $('.site-header').outerHeight();
      var visHeight   = hW-hNavbar;
      var menuItems = $('.menu > li').size();
      var mMenuHeight = 45*menuItems;

      if( mMenuHeight > visHeight ){
        $('.mainnav').height(visHeight).addClass('scrollable-mobile-menu');
      }

    });
    
  });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (max-width: 1024px) {
      .scrollable-mobile-menu{
        overflow-y: scroll;
      }  
    }

Regards,
Kharis

Hi Kharis,

I tried that code and it didn’t work.

Hello there,

Is there a site cache applied? If so, you’d need to flush/clear it whenever new code added. Because active cache usually won’t load recent changes have made.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi There,

No there is no site cache (I’ve checked) and still it’s not working. Pleas help

Hi,

I really need some assistance on this please

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      #masthead.site-header.float-header {
        position: static !important;
      }  
    }

Regards,
Kharis

Hi Kharis,

Thank you that worked, but now the menu isn’t sticky i.e when i scroll down the page, the menu now doesn’t stay at the top of the page

Hello there,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      $(window).on('load resize', function() {

        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
          var hW          = $(window).height();
          var hNavbar     = $('.site-header').outerHeight();
          var visHeight   = hW-hNavbar;
          var menuItems   = $('.menu > li').size();
          var mMenuHeight = 45*menuItems;

          if( mMenuHeight > visHeight ){
            $('.mainnav').height(visHeight).addClass('scrollable-mobile-menu').css({
              'overflow-y': 'scroll'
            });
          }
        }

      });

    });
  1. Update

Regards,
Kharis

I tried that and it does not work. Menu still doesn’t stay on top when scrolling

Please check your Additional CSS, if this code remains, you should have to remove it.

    @media only screen and (max-width: 1024px) {
      #masthead.site-header.float-header {
        position: static !important;
      }  
    }

Regards,
Kharis

Please check your Additional CSS, if this code remains, you should have to remove it.

Now the original issue is back. The menu gets cut off. Maybe it would be eaier if I gave you login details and you can enter and have a look for yourself?

Hello there,

Please share the working admin login username and password privately to my email at kharisblank@gmail.com. Before doing so, for security reason, you’d need to enable the Activity Log plugin to monitor my activities.

Regards,
Kharis