search not working on mobile

  • hello, I have a mobile and desktop separate headers in elementor.
    in the desktop one the search is working perfectly (at the top of the header the search field that is working)
    on the mobile header, when i use the native search in header widget the search is not the AWS one. so i don’t get any live results.

    to see what I am talking about just click on the search scope icon on the mobile header. a full popup will open but no results there.

    also, how can i insert the search widget to the mobile menu along with the header?
    thank you

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    Hello,

    Did you try to enable ‘Seamless integration’ option from the plugin settings page?

    About mobile menu – if it is supporting any widget areas inside just add AWS widget to it to display plugin search form.

    Regards

    Thread Starter freshuk

    (@freshuk)

    Hello
    yes – seamless integration is on. but still it does not work on mobile

    Plugin Author ILLID

    (@mihail-barinov)

    Ok, so as I understand you create this custom header with Elementor theme buider.
    Please tell me how you build this mobile menu with search form pop-up? It is some Elementor default element or you are using some addition plugin for this?

    Regards

    Thread Starter freshuk

    (@freshuk)

    This is elenentskit addon for elementor, the Header was built in elementor using this addon. Thank you

    Plugin Author ILLID

    (@mihail-barinov)

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

    add_filter( 'elementor/widget/render_content', 'aws_elementor_render_content', 10, 2 );
function aws_elementor_render_content( $content, $widget ) {
       
            // Elementskit plugin header search
            if ( method_exists( $widget, 'get_name' ) && $widget->get_name() === 'elementskit-header-search' ) {
                $content = '<style>
                .ekit-search-panel .aws-container .aws-search-form {
                    height: 50px;
                }
                .ekit-search-panel .aws-container .aws-search-field {
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                }
                .ekit-search-panel .aws-container .aws-search-form .aws-search-btn.aws-form-btn,
                .ekit-search-panel .aws-container .aws-search-form .aws-form-btn:last-of-type {
                    border-top-right-radius: 50px !important;
                    border-bottom-right-radius: 50px !important;
                    width: 60px;
                }
                .ekit-search-panel .aws-container .aws-search-form,
                .ekit-search-panel .aws-container .aws-search-form .aws-form-btn {
                    background: transparent;
                }
                .ekit-search-panel .aws-container .aws-search-form .aws-main-filter .aws-main-filter__current,
                .ekit-search-panel .aws-container .aws-search-form .aws-search-btn_icon,
                .ekit-search-panel .aws-container .aws-search-field,
                .ekit-search-panel .aws-container .aws-search-field::-webkit-input-placeholder {
                    color: #fff;
                }
                .ekit-search-panel .aws-container .aws-search-field,
                .ekit-search-panel .aws-container .aws-search-form .aws-form-btn{
                    border: 2px solid #fff;
                }
                
                .ekit-search-panel .aws-container[data-buttons-order="3"] .aws-search-field {
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                    border-top-right-radius: 50px !important;
                    border-bottom-right-radius: 50px !important;
                }               
                .ekit-search-panel .aws-container[data-buttons-order="3"][data-filters*="{"] .aws-search-field {
                    border-top-left-radius: 0 !important;
                    border-bottom-left-radius: 0 !important;
                }                
                .ekit-search-panel .aws-container[data-buttons-order="3"][data-filters*="{"] .aws-search-form .aws-form-btn {
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                }
                
                .ekit-search-panel .aws-container[data-buttons-order="4"] .aws-search-field {
                    border-top-left-radius: 0 !important;
                    border-bottom-left-radius: 0 !important;
                    border-top-right-radius: 50px !important;
                    border-bottom-right-radius: 50px !important;
                } 
                .ekit-search-panel .aws-container[data-buttons-order="4"] .aws-search-form .aws-form-btn:last-of-type {
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                }
                
                .ekit-search-panel .aws-container[data-buttons-order="5"] .aws-search-field,
                .ekit-search-panel .aws-container[data-buttons-order="5"] .aws-search-form .aws-main-filter.aws-form-btn {
                    border-top-left-radius: 0 !important;
                    border-bottom-left-radius: 0 !important;
                    border-top-right-radius: 50px !important;
                    border-bottom-right-radius: 50px !important;
                }
                .ekit-search-panel .aws-container[data-buttons-order="5"][data-filters*="{"] .aws-search-field {
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                }
                .ekit-search-panel .aws-container[data-buttons-order="5"] .aws-search-form .aws-form-btn:last-of-type {
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                }
                
                .ekit-search-panel .aws-container[data-buttons-order="6"] .aws-search-field {
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                } 
                .ekit-search-panel .aws-container[data-buttons-order="6"][data-filters*="{"] .aws-search-field {
                    border-top-left-radius: 0 !important;
                    border-bottom-left-radius: 0 !important;
                }
                .ekit-search-panel .aws-container[data-buttons-order="6"] .aws-search-form .aws-main-filter.aws-form-btn {
                    border-top-left-radius: 50px !important;
                    border-bottom-left-radius: 50px !important;
                }
                
                </style>' . $content;
                $content = preg_replace( '/<form[\S\s]*?<\/form>/i', aws_get_search_form( false ), $content );
            }

            return $content;
        }

    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.

    Thread Starter freshuk

    (@freshuk)

    Wow you are awesome! Thank you.
    All is working great, just the text inside the search input field is not visible when typing the search, like in the screen shot. Thank you again!
    Search text not visible

    Plugin Author ILLID

    (@mihail-barinov)

    I see. Please use use addition style

    .ekit-search-panel .aws-container .aws-search-field {
color: #000 !important;
}
    Thread Starter freshuk

    (@freshuk)

    You are the king my friend.
    BTW there are no plus minus buttons on the quantity field, just add to cart button
    On the desktop version it’s all good

    Plugin Author ILLID

    (@mihail-barinov)

    Yes, you are right about this. But it is the default behavior of input=number field. It shows arrow only on focus and on mobile devices arrows are hidden.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘search not working on mobile’ is closed to new replies.