Mobile search not working

Hello @oaklandmurals,

Thanks for reaching out and letting us know.

We are aware of the issue, and it will be fixed for the next updates. For a temporary solution, please use these custom codes below:

Custom CSS:

/* DropDown and Overlay */
#icon-searchform-dropdown.enable-manually,
#icon-searchform-overlay.enable-manually {
    display: block;
    visibility: visible;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

Custom JS:

jQuery(document).ready(function($) {
    /* DropDown */
    $( ".oceanwp-mobile-menu-icon .search-icon-dropdown" ).click(function() {
        $( this ).parents().eq(2).find(".search-style-dropdown").toggleClass( "enable-manually" );
    });
    /* Overlay */
    $( ".oceanwp-mobile-menu-icon .search-icon-overlay" ).click(function() {
        $( this ).parents().eq(2).find(".search-style-overlay").toggleClass( "enable-manually" );
    });
    $(".search-style-overlay .search-overlay-close").click(function() {
        $( this ).parents().eq(3).find(".search-style-overlay").removeClass( "enable-manually" );
    });
});

For more information about the CSS/JS code on the customizer, please read this link:
https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, if you are using Elementor, please don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

Please recheck your issue and keep us posted.

Best Regards

• This reply was modified 2 years, 7 months ago by Shahin.

Thanks. I tried this earlier and unfortunately it didn’t work. I just tried again and stil nothing. The search in the expanded hamburger menu works, but the one next to it still doesn’t.

Hello @oaklandmurals,

The issue is here. It’s a JS error: https://i.postimg.cc/VNBTPDTV/001.png.
Custom JS in customizer has the wrong code that needs to fix: https://i.postimg.cc/pLkG0pnw/image.png.

Best Regards

Sorry, I don’t understand- can you tell me exactly what needs to change?

I copied and pasted your code from above into Custom JS on the appearance customizer and that didn’t work- that’s what I shared above.

I just went back to the ddocumentation and see that maybe the issue is that I had some part of
jQuery(document).ready(function($) {
in there, but I’ve trid without

jQuery(document).ready

and nothing.

Can you tell me exactly what needs to be changed? I don’t know JS.

Thanks.

Hello @oaklandmurals,

I just rechecked your website, and I didn’t see that issue. It seems it was a cache issue. I’ve attached screenshots on this link: https://postimg.cc/gallery/jbg1nQy. There is no issue in those screenshots.

To check that, please follow the steps explained in this link:
https://www.documate.org/automation/what-is-a-hard-refresh-how-to-do-a-hard-refresh-in-any-browser/.

Win: Ctrl+Shift+R
Mac: Shift+Command+R

Note: if you have a cache on the server or using the CDN; You need to clear its cache contents or disable them.

Best Regards

oh yay you’re right! it’s working now on my phone- i hard reloaded my desktop cache and looked in simulator mode, but it wasn’t working on my phone. today it’s all better. thanks!

Thank you @skalanter. Our site uses OceanWP and one of our customers reported the search feature was broken on our site yesterday and this fix worked perfectly.

Hello All,

You’re very welcome,
glad we could help.

Best Regards