Search Overlay Close button not visible in mobile

Hi,

Looks like I found the solution for you. Please use following code snippet:

add_action( 'wp_head', 'oceanwp_head_action' );
function oceanwp_head_action() {
    ?>

    <style>
        .oceanwp-theme #searchform-header-replace .aws-container {
            padding-right: 45px;
            padding-top: 0;
        }
        .oceanwp-theme #searchform-header-replace .aws-container .aws-search-form .aws-form-btn {
            background: transparent;
            border: none;
        }
        .oceanwp-theme #searchform-overlay .aws-container,
        .oceanwp-theme #icon-searchform-overlay .aws-container {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -33px;
            width: 100%;
            text-align: center;
        }
        .oceanwp-theme #searchform-overlay .aws-container form,
        .oceanwp-theme #icon-searchform-overlay .aws-container form {
            position: static;
        }
        .oceanwp-theme #searchform-overlay a.search-overlay-close,
        .oceanwp-theme #icon-searchform-overlay a.search-overlay-close {
            top: -100px;
        }
        .oceanwp-theme #searchform-overlay .aws-container .aws-search-form,
        .oceanwp-theme #icon-searchform-overlay .aws-container .aws-search-form,
        .oceanwp-theme #searchform-overlay .aws-container .aws-search-form .aws-form-btn,
        .oceanwp-theme #icon-searchform-overlay .aws-container .aws-search-form .aws-form-btn {
            background: transparent;
        }
        .oceanwp-theme #searchform-overlay .aws-container .aws-search-form .aws-form-btn,
        .oceanwp-theme #icon-searchform-overlay .aws-container .aws-search-form .aws-form-btn {
            border: none;
        }
        #sidr .aws-container {
            margin: 30px 20px 0;
        }
        #medium-searchform .aws-container .aws-search-form,
        #vertical-searchform .aws-container .aws-search-form {
            background: #f5f5f5;
        }
        #medium-searchform .aws-container .aws-search-form .aws-search-field {
            max-width: 100%;
        }
        #medium-searchform .aws-container .aws-search-form .aws-form-btn,
        #vertical-searchform .aws-container .aws-search-form .aws-form-btn{
            background: #f5f5f5;
            border: none;
        }
    </style>

    <script>

        window.addEventListener('load', function() {

            window.setTimeout(function(){
                var formOverlay = document.querySelectorAll("#searchform-overlay form, #icon-searchform-overlay form");
                if ( formOverlay ) {
                    for (var i = 0; i < formOverlay.length; i++) {
                        formOverlay[i].innerHTML += '<a href="#" class="search-overlay-close"><span></span></a>';
                    }
                }
            }, 300);

            jQuery(document).on( 'click', 'a.search-overlay-close', function (e) {

                jQuery( '#searchform-overlay, #icon-searchform-overlay' ).removeClass( 'active' );
                jQuery( '#searchform-overlay, #icon-searchform-overlay' ).fadeOut( 200 );

                setTimeout( function() {
                    jQuery( 'html' ).css( 'overflow', 'visible' );
                }, 400);

                jQuery( '.aws-search-result' ).hide();

            } );

        }, false);

    </script>

    <?php
}

You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.

Regards

Thanks a lot for your quick response and your great code snippet!

I’ve put it into my functions.php file, it worked perfect and definitely the search overlay close button looks fine now, both in desktop and mobile.

The only thing now is regarding the search clear button (the one inside search field) which is not visible in desktop while in mobile is OK.

Moreover how could i put the whole search form in top of the screen (now appears in the middle)?…don’t know how to handle the top, margin, etc values appropriately in order to accomplish that!

Thanks in advance.
Regards

To show clear button you can try to use following code:

#searchform-overlay .aws-container .aws-search-form .aws-search-clear span:after {
    content: 'x';
}

To move search form at the top please use:

.oceanwp-theme #searchform-overlay .aws-container, 
.oceanwp-theme #icon-searchform-overlay .aws-container {
position: absolute;
    top: 0 !important;
    margin-top: 140px !important;
}

It’s great…works perfect!!! Thanks a lot again!

One more notice (hopefully the last one!)…
While in mobile the initial text (ie. “search for…”, or whatever) is displayed normally into search field, this is not the case when in desktop…search field is totally empty in first place.
Could you please show me how this can be fixed as well?

I see for some reason placeholder field value is striped on desktop. Please try to use following css:

#searchform-overlay .aws-container .aws-search-form .aws-search-field::-webkit-input-placeholder::before {
    content: 'search for…';
}

I’ve tried it but doesn’t seem to work.
Anything else?

In this case you need to use some js code. Please try that php snippet:

add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
    $script = ' 
        jQuery( document ).ready( function() {
             jQuery("#searchform-overlay .aws-search-field").attr("placeholder","ddd");
        } );
    ';
    wp_add_inline_script( 'aws-script', $script);
    wp_add_inline_script( 'aws-pro-script', $script);
}

Unfortunately, this is not working as well.

Perhaps, i could leave with that issue…not big deal anyway!

If you find any other solution in the future please let me know.

In any case thanks a lot for your responses and your great help!!!

Strange that the last snippet din’t work. Anyway please try to clear browser and any plugins cache. Maybe this will help.

Did that as well…no success.

I tried it again (actually in the current instance of my site the snippet is still there).

I think there is some kind of conflict with TranslatePress that i use for the language selection (Greek/English)…

When in Greek it doesn’t work at all…

When in English it has a strange behavior… in first place the text “Search” that i have put to show into search form field is instantly displayed but then immediately disappears! And when i press search-close button it instantly appears again just before search overlay form goes away!

I don’t know if that helps you a bit.

Looks like the TranslatePress plugin just removed that string. As I know that plugin uses JavaScript to make translation on the fly. But still it is hard to say how to fix that.

I don’t know if it has to do with what we did here but trying to update new plugin version AWS 2.40 seems the whole searching functionality doesn’t work at all…
The styling remains OK, as it was till today but…
The search button seems “dead” (not responding to click event), as well as the search text field do not trigger search function after some (3 in my case) characters are inserted.
This happens for sure in desktop but to be honest did not tried it in mobile.
For the moment i have returned to version 2.38 but i’d like to know how to make it work in the new versions.

Just checked your website and all seems to work fine for me.

Yes, because i returned to previous version 2.38…
This is what runs in my website right now.

From next hour i will try again the 2.40 version…

Pls, check again

Yes, I see the issue now. Looks like the problem is in the missing .js file.
I see you are using an assets minification plugin. Please try to clear its cache and browser cache and check one more time.