Live search showing behind mobile menu

Hello,

Try to add the below code to the Appearance > Customize > Custom CSS section and check it works or not –

ul.ui-autocomplete {
    z-index: 100001;
}

Thank you, Amit

It worked, what an idiot I’m haha… I didn’t try that index.

Now, can you help me with something else? If you check from your mobile you’ll see that it doesn’t show/work properly because it appears behind the keyboard.

I was trying to see if there was an option to show the search icon rather to the left of the hamburger menu than inside of it. (like the cart icon shows) but I couldn’t find one in the theme.

Can you confirm that? or do you know a way I can achieve that?

• This reply was modified 5 years, 8 months ago by oscarlorak.

Hello,

Yes, it is behind the keyboard but you can scroll it up and down. We can’t appear it above the keyboard.

For the search icon along with the menu, yes it is possible with custom code + Ocean Elementor widget plugin (search icon widget). If you know other plugins that offer search icon, then you can use it.

Let me know so that I can give you the complete code to achieve it.

Hey, Amit
I have the Ocean Elementor widget
Could you please help me with the custom code you said?

Try to follow the below steps to do it –

1. Create a custom template using Elementor under Theme Panel > My Library. Use only Search Icon widget 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. Add the below code to the Customize > Custom CSS section to fix the alignment issue –

@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 help you.