Mobile: Show menu between header and slider

Hi,

when the user clicks on the hamburger icon then the mobile menu overlaps the slider. Is it possible that menu appears between header and slider and moves down the slider?

Best regards,
Hendrik

Hi Hendrik,

I checked the mobile menu with my phone and it appears fine. No issues needed to fix.

Here is the screen recording when testing.

Which web browser’s version are you running? Is it the latest one? Do you notice it only happens on specific web browser? Have you tried other web browsers?

Regards,
Kharis
aThemes Support

Hi Kharis,

thanks for your reply. I try to explain the issue with a screenshot and a mockup.

Current status:

The menu overlaps the slider when you click on the hamburger icon.

Expected behavior:


The menu appears between header and slider and moves down the slider without overlapping the slider.

Hello there,

Thank you for getting back along with screenshots.

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

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

      .site-header #mainnav-mobi {
        position: relative;
      }
      
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

now it is much better. It seems that the menu still overlaps the slider by approximately 10px when I change the witdh of #mainnav-mobi to e.g. 80%

@media only screen and (max-width: 767px) {
   #mainnav-mobi {
     width: 80%;
   }
 }

Please have a look at the screenshot. How can I fix this issue?
screen

Currently the slide down animation of the main navigation, which you see when you click on the hamburger icon, is pretty smooth and shouldn’t be affected by any changes.

Best regards,
Hendrik

Hi Hendrik,

Thank you for getting back.

To fix it, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      #mainnav-mobi ul.menu {
        margin-bottom: 12px;
      }
    }

Regards,
Kharis
aThemes Support

Now it is perfect. Thanks!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support