Adding search icon to mobile menu

Hello,

Follow the steps to do it. Install and activate the OceanWP child theme, after that follow the steps –

1. Create a custom template using Elementor under Theme Panel > My Library. Use only Search Icon widget (ocean elementor widget extension) in this template and copy the template shortcode
2. Now add the below code to the functions.php file of the child theme to display it. Replace the template shortcode with your copied template shortcode in the code –

function prefix_mobile_menu_search_icon() {
    echo do_shortcode( '[oceanwp_library id="307"]' );
}
add_action('ocean_before_mobile_icon_inner','prefix_mobile_menu_search_icon');

3. Now add the below CSS code and let me know it works for you or not. After adding the code, test it on a live page. Edit the css code also to replace the elementor section id –

@media only screen and (max-width: 959px) {
body.default-breakpoint .oceanwp-mobile-menu-icon {
    display: flex;
}
}
.elementor.elementor-18262 {
    margin-top: -8px;
}

Hope it will work for you.

Thank you so much for your help! It works!

You’re welcome!

I also have the same issue. I wants to add search icon on mobile view is there any method to do it without custom template it means. My site is https://homeinteriorstores.com/