Mobile header search overlay style not working

Hello @aduwow,

Thanks for reaching out and letting us know.

Regarding the floating bar and search icon issue, we did see this happening on our end, so we’ll share this with our team for investigation and fix for the next updates.
For a temporary solution for search issue, please add the code below in Customizer > Custom CSS/JS > CSS:

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

and code below in the Customizer > Custom CSS/JS > Custom JS:

/* Overlay */
jQuery(document).ready(function($) {
$( ".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 custom 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, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

Regarding the scrolling to the top, I didn’t see any issue on my end. If you use the cache plugin, or CDN, or server cache, please make sure to clear all cache and recheck your issue. Perhaps your browser or internet has been cached, so try to hard-refreshing or check your issue on another device. 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

I hope that helps

Best Regards

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

Thanks @skalanter
I also have a problem:
I want to replace the default mobile menu search form (overlay mode) with a custom search form.
I have inserted the code in the child theme’s helpers.php file but it doesn’t work. It only works when inserting into main theme
Are there any instructions where I can insert code in the function.php file?
I also tried copying the mobile-search.php file into the child theme and making changes in that file but it still doesn’t work.

Hello @aduwow,

The solution to achieve it is customization. To do this, first, you need to use the child theme. You can copy the meta file from the partials folder in the child theme following the same path and then do necessary changes.

For more information about that, please follow the steps below:

By using FTP or cPanel access (if didn’t use the localhost), Go to this directory:
wp-content\themes\oceanwp\partials
Find your template which you want to customize and copy that template file(in your case, for example, you need to change the date on the blog pages, so you need to use the blog template(s): https://i.postimg.cc/brv9gn9s/image.png).

Then head over to the same path on the child theme. There isn’t an entry folder as a default on your child theme, so you need to create a new one(one time).

Example: If you want to change the HTML tags structure in the single blog posts featured image for standard post format, all you need in this step is:

1- Head over to your WP root > wp-content > themes > oceanwp > partials> single > media path.
2- Then, find the “blog-single.php” file and copy this file.
3- After that, back to the themes folder (wp root > wp-content > themes) and go to oceanwp-child-theme-master folder.
4- Create a new folder into the child theme with the “partials” name.
5- Go to the /partials/ folder and create a new folder with the “single” name.
6- Go to the /single/ folder and create a new folder with the “media” name.
7- Go to the /media/ folder and paste the “blog-single.php” file here.

* Please check this screenshot: https://i.postimg.cc/sxjYTWyt/image.png.

Note: It’s working with the /woocommerce/ folder or root of the theme files.

I hope that helps.

Best Regards

Thank @skalanter for your feedback
As I said above I have inserted the code in the child theme’s helpers.php file but it doesn’t work. It only works when inserting into main theme.
I searched the forums for information. And they say that it is not possible to replace the content in the helpers.php file in the child theme. Is that correct?

Hello @aduwow,

Sorry for the misunderstanding,

Yes, it’s correct. Unfortunately, that’s impossible because you can only replace the template files and the helpers.php file in the /inc/ folder is not a template. If you want to change the functionality of the theme or plugins, you need to use hooks in WordPress(if it’s available), and in this case, you need to know about the PHP and WordPress hooks(filters and actions).

Best Regards

Yes, I understand that. I have tried some hooks but it doesn’t work. This is beyond my ability.
I checked again scroll to top button. It still works on Samsung smartphone but not on iPhone (Safari). If possible, you can try again on iPhone to see if the problem occurs.
And one more problem FontAwesome Brand Icon Menu is not working on Mobile and Tablet. I have tried with Facebook, WordPress, Google icons. They show up on PC but not on Mobile and Tablet.
On PC: https://prnt.sc/GoadxQbRYgBa
On Mobile and Tablet: https://prnt.sc/U7KvNOVMJYiw

Hello @aduwow,

Thank you for reaching out, and thank you for your reports,

We did see those issues happening on our end, so we’ll share this with our team for investigation and fix for the next updates.

I appreciate your patience until the issues are resolved.

Best Regards

Hi @skalanter

Could you give me custom css/js to fix issue with dropdown searchform in mobile header please ?
I have the same problem that @aduwow but I use dropdown searchform.

Thanks for your time

Hi @zougou,

The solution is in the second reply on this topic please click here.

Best Regards

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

Thanks Shahin, but your css/js code seems to work only for the overlay searchform.
But my question was about the dropdown searchform in mobile header.

Hi @zougou,

Sorry about that,
Please use this 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;
}

and This 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" );
    });
});

Use the above codes instead of the previous codes.

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

I hope that helps,
Best Regards

HI @skalanter,

Thanks a lot, that did the trick ??
Have a nice day !

Hi @zougou,
You’re most welcome,
Have a wonderful day.

HI @skalanter,

I had facing an issue about OceanWP’s Mobile Header Search Icon are not working while already selected either Drop Down / Overlay,
Below are my website which facing issue on Mobile View. Hope you can help me on this.

https://pxpstore.com.my/