Overlapping header menu on mobile device

Hello @ormgrecipes,

I hope you are doing well.

I have just checked your website. It could be a style conflict. Also, It seems your “Content is protected” on your website. So I couldn’t inspect your website correctly. It would be so appreciable if you please disable your content protection and let me know.

Thank you!

Hello @ormgrecipes,

I have checked your issue again. It seems you are having some style conflict there. But you can fix this using some Custom CSS. Please check this Custom CSS given below –

@media only screen and (max-width: 391px) {
    .mob-menu-header-holder {
        top: 100px!important;
    }

    .mob-icon-menu {
        line-height: 100px!important;
    }

    .ec-minicart {
        top: 250px!important;
    }

    #ecwid_body {
        padding-top: 225px!important;
    }

    .nx-bar-inner .elementor-heading-title {
        font-size: 16px!important;
    }

    .nx-bar-inner .elementor-button {
        font-size: 14px!important;
    }

    .nx-bar-inner .notificationx-close {
        display: none!important;
    }
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.

After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert the CSS Code.

Please check this screencast to learn more – https://d.pr/v/QrrfTw

Note: If you disable your NX Bar in future, it’s recommended to delete this Custom CSS also.

Let me know how it goes. Thank you!

Thank you so much, that worked for me!