Mobile header - dropdown menu is stucked

Hi there,

This is my webpage: 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;
    #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?

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 ){

  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
      overflow-y: scroll;


Thx for help, I did your steps.

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

Hello there,

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


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:

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

I used this CSS code to fixing header in mobile view too: {
      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)