Mobile menu covers the entire screen

when clicked hamburger button, menu covers the entire screen in airi free theme. Is there a option to reduce the resize of the menu proportional to the number of items in it so screen will be visible

Hi,

Thank you for reaching out to us. I am happy to help with your queries.

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

    @media only screen and (max-width: 1199px) {

      .mobile-menu-active .main-navigation {
        max-width: 300px;
        right: 0;
        left: auto;
      }
      
    }

I hope that helps.

Regards,
Kharis
aThemes Support

Hi Kharis

Thank you for quick response.

It worked well but one small change I wish to request in it.

Menu is too long with too much of blank space in it.

Menu should actually end after Contact, but it extends. If possible do let us know how to fix it.

Thanks Kharis for your help

Regards
Vimal J

Hi Vimal,

Thank you for trying the code.

You’ll need to add bottom: auto; line. So the final code will look like this:

    @media only screen and (max-width: 1199px) {

      .mobile-menu-active .main-navigation {
        max-width: 300px;
        right: 0;
        left: auto;
        bottom: auto;
      }
      
    }

Regards,
Kharis
aThemes Support