Problems with Mobile Menu and Header - Airi free

Hello

I have two problems with the header and menu.

First, on the homepage, everything works fine on a normal computer screen, the header background is transparent and I can see the photo in background. But as soon as I open it on a narrower screen, such as a mobile, the header overlaps the photo. Is it possible to have it also transparent so that the photo is visible from the top?

Second question, about the menu. Once again, everything works fine on a computer screen, . But on narrower screens, when I open the burger menu on the homepage, nothing is visible.
It works great on other pages of the website, for example when I open the burger menu from the ‘a propos’ page.

If you can help me solve those problems… Thanks !
website url : www.elsadesjardins.fr

Hello there,

Thank you for contacting us.

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

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

  .home .menuStyle1 #masthead.site-header {
    position: fixed;
  }

  .home #masthead-sticky-wrapper:not(.is-sticky) .site-header {
    background-color: transparent !important;
  }
  
}

It appears fine to me.

Do you have a video recording to help better understand the issue on your end?

Regards,
Kharis
aThemes Support

Thanks a lot for your reply.
1/ The CSS Code you gave me works for a narrower screen on computer but not for mobile. Here is a video : https://youtu.be/ek_SYyZfl64

2/ Here is a video : https://youtu.be/P_Y90VHfN_o

Hello there,

My apologies for the delay in response.

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

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

  .home .menuStyle1 #masthead.site-header {
    position: static !important;
  }
}

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hello

It doesn’t change anything…

Hello there,

Please check whether you have active caching enabled with a plugin. I request you to flush it (if applied) as it may prevent web browser to load last code changes.

The caching also may enabled in the background, which resides in the server level. You may contact your web hosting service to flush it.

If this doesn’t help, please validate your all custom CSS code with this tool and ensure there is no error found.

Stay safe.
Have a nice day.

Regards,
Kharis
aThemes Support