Mobile header - dropdown menu is stucked


#1

Hi there,

This is my webpage: https://www.freesportparks.hu/en/ I use this own custumised CSS for my mobile header.

    @media only screen and (max-width: 767px){
    .btn-menu { 
    float: right; 
    margin-right: 10%; 
    margin-top: -47px;
    	}
    .header-wrap .container { 
    text-align: left; 
    margin-left: 5%
    	}
    .search-field { 
    margin-top: 50px;
    	}
    .site-header.float-header 
    #mainnav-mobi { 
    margin-top: 4px;
    	}
    }

Problem is if I use the dropdown menu eg on a vertical screen where you see only part of the dropdown menu, than you can’t scroll down. See in this picture where I cant go under the Installation menu point:

How could I fix this?


#2

Hello there,

Try doing the below steps, please.

  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.
    .scrollable-mobile-menu{
      overflow-y: scroll;
    }

Regards,
Kharis


#3

Thx for help, I did your steps.

Scrolling is working, but now the header slider is showing only halfway:


#4

Hello there,

Try enabling full screen slider option by going to Appearance > Customize > Header area > Header Slider > Slider mobile behavior.

Regards,
Kharis


#5

now vertical screen is ok, but horizontal is’not:

Responsive behavior has a better user experience in mobile view. Is it possible to fix this with Responsive behavior?

Vertical view:

Horizontal view:


#6

Hi Kharis,
I found out what cause the whole problem:

I used this CSS code to fixing header in mobile view too:

   #masthead.site-header.fixed {
      position: fixed !important;
   }

This is why stucked the dropdown menu and doesn’t work the responsive slider mobile behavior.

I would like too keep the stucked header in mobile view with responsive behavior, do you have any idea, how to solve this… :slight_smile:

(now you see the site with original state without this header fixing css code and without your first solution)