Search and close button overlaps when scrolling on menu

Hey babyboymik,

Thanks for the video. What dimensions does the device you are using have?

Best regards,
Rikard

Hi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 768px) and (orientation: landscape) {
.responsive.av-burger-overlay-active-delayed #top #avia-menu.av-main-nav .menu-item-avia-special {
	    right: -165px;
}
}

After applying the css, please clear your browser cache and check.
This css will move the Search and close button to the right when the mobile menu is open, the landscape width should be correct but feel free to increase it if you wish.

Best regards,
Mike

Hi,
It seems to be working when I check, please see the screenshot in the Private Content area.
Try clearing your browser cache and disable any caching plugins, if you are using Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Odd, the screenshot is from Chrome on Windows desktop with Dev Tools emulating a mobile device, and I also get this with my Galaxy A01 using Chrome.
Try checking your device screen resolution in portrait and landscape mode and post the dimensions so we can be sure of the media query of the css above.
Thanks.

Best regards,
Mike

Hi,
Thank you for this, I see your landscape width is 892px, so we will try adding for this, please try this css instead:

@media only screen and (max-width: 768px) and (orientation: landscape) {
.responsive.av-burger-overlay-active-delayed #top #avia-menu.av-main-nav .menu-item-avia-special {
	    right: -165px;
}
}
@media only screen and (min-width: 769px) and (max-width: 895px) and (orientation: landscape) {
.responsive.av-burger-overlay-active-delayed #top #avia-menu.av-main-nav .menu-item-avia-special {
        right: -165px;
}
}

I my test the right: -165px; seemed to be correct, but you can adjust if you need to, this will also give you the option to adjust for smaller and larger mobile devices, or if you wish you can just change to one rule:

@media only screen and (max-width: 895px) and (orientation: landscape) {
.responsive.av-burger-overlay-active-delayed #top #avia-menu.av-main-nav .menu-item-avia-special {
        right: -165px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike