Search Box in Main Menu while using Mega Menu Plugin

Hey Akhurst,

Thank you for the inquiry.

You can insert a widget area in the header and add a Search widget to it. Please check this documentation for more info: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hi,

Thank you for the update.

You can add this css code to adjust the position of the search widget. You may need to fine-tune it for different screen sizes using css media queries.

#top .widget_product_search.widget {
    position: absolute;
    min-width: 312px;
    left: 50%;
    transform: translateX(-80%);
    z-index: 100;
    top: 30%;
}

Best regards,
Ismael

Hi,

Thank you for the screenshots.

The css code for the widget should not have affected the sidebar. Please make sure there is no invalid css and that you didn’t accidentally break or modify the existing code when adding the recent changes. Let us know the result.

Best regards,
Ismael

Hi,

Sorry about that. It was indeed the css modification that caused the search field in the sidebar to be repositioned. Please edit the previously suggested css code and replace it with:

#top #header_main .widget_product_search.widget {
    position: absolute;
    min-width: 312px;
    left: 50%;
    transform: translateX(-80%);
    z-index: 100;
    top: 30%;
}

Let us know how it goes.

Best regards,
Ismael

Hi,

Thank you for the update.

To hide the header search widget on mobile, add this css code at the bottom of the previous modifications:

@media only screen and (max-width: 767px) {
    #top #header_main .widget_product_search.widget {
        display: none;
    }
}

Best regards,
Ismael

Hi,

Great! Please don’t hesitate to open another thread if you have more questions.

Have a nice day.

Best regards,
Ismael