OceanWP – search on mobile not working

Hi @loadofbikes

1. I see that you manage to fix the problem with the 2 magnifying glass icons. Do you still need help with that?

2. Your theme has a different overlay for the mobile search. This means there is still a default search bar active. To change that use this code snippet:

/**
 * FiboSearch Mobile Search Form
 *
 */
add_action( 'ocean_fibosearch', function () {

  $class        = '';
  $search_style = oceanwp_mobile_menu_search_style();
  $search_style = $search_style ? $search_style : 'disabled';
  $header_style = oceanwp_header_style();
  $post_type    = get_theme_mod( 'ocean_menu_search_source', 'any' );

  if ( 'disabled' === $search_style || 'vertical' === $header_style ) {
    return;
  }

  // Get correct search icon class
  if ( 'drop_down' == $search_style ) {
    $class = 'dropdown';
  } elseif ( 'header_replace' == $search_style ) {
    $class = 'overlay';
  } elseif ( 'overlay' == $search_style ) {
    $class = 'overlay';
  } else {
    $class = '';
  }

  ?>
  <div id="icon-searchform-overlay" class="search-style-overlay fibosearch">
    <div class="container clr">
      <?php echo do_shortcode( '[fibosearch]' ); ?>
    </div>
  </div>
  <?php
}, 30 );

You have two ways to add this code to your theme:
Open the functions.php in your child theme and add the code at the end.
or install the Code Snippets plugin and apply this code as a snippet.

After that create mobile-icon.php file in your child theme in oceanwp-child/partials/mobile folder. Paste this code into it:

<?php
/**
 * Mobile Menu icon
 *
 * @package OceanWP WordPress theme
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Return if disabled.
if ( ! oceanwp_display_navigation() ) {
	return;
}

// Menu Location.
$menu_location = apply_filters( 'ocean_main_menu_location', 'main_menu' );

// Multisite global menu.
$ms_global_menu = apply_filters( 'ocean_ms_global_menu', false );

// Menu data attributes.
$toggle_menu_attrs = apply_filters( 'oceanwp_menu_toggle_data_attrs', '' );

// Display if menu is defined.
if ( has_nav_menu( $menu_location ) || $ms_global_menu ) :

	// Get menu icon.
	$icon = get_theme_mod( 'ocean_mobile_menu_open_icon', 'fa fa-bars' );
	$icon = apply_filters( 'ocean_mobile_menu_navbar_open_icon', $icon );

	// Custom hamburger button.
	$btn = get_theme_mod( 'ocean_mobile_menu_open_hamburger', 'default' );

	// Get menu text.
	$text = get_theme_mod( 'ocean_mobile_menu_text' );
	$text = oceanwp_tm_translation( 'ocean_mobile_menu_text', $text );
	$text = $text ? $text : esc_html__( 'Menu', 'oceanwp' );

	// Get close menu text.
	$close_text = get_theme_mod( 'ocean_mobile_menu_close_text' );
	$close_text = oceanwp_tm_translation( 'ocean_mobile_menu_close_text', $close_text );
	$close_text = $close_text ? $close_text : esc_html__( 'Close', 'oceanwp' );

	if ( OCEANWP_WOOCOMMERCE_ACTIVE ) {

		// Get cart icon.
		$woo_icon = get_theme_mod( 'ocean_woo_menu_icon', 'icon_handbag' );
		$woo_icon = in_array( $woo_icon, oceanwp_get_cart_icons() ) && $woo_icon ? $woo_icon : 'icon_handbag';

		// If has custom cart icon.
		$custom_icon = get_theme_mod( 'ocean_woo_menu_custom_icon' );
		if ( '' !== $custom_icon ) {
			$woo_icon = $custom_icon;
		}

		if ( '' !== $custom_icon ) {
			$cart_icon = '<i class="' . esc_attr( $woo_icon ) . '" aria-hidden="true"></i>';
		} else {
			$cart_icon = oceanwp_icon( $woo_icon, false );
		}

		// Cart Icon.
		$cart_icon = apply_filters( 'ocean_menu_cart_icon_html', $cart_icon );

	}

	// Classes.
	$classes = array( 'oceanwp-mobile-menu-icon', 'clr' );

	// Position.
	if ( 'three' === get_theme_mod( 'ocean_mobile_elements_positioning', 'one' ) ) {
		$classes[] = 'mobile-left';
	} else {
		$classes[] = 'mobile-right';
	}

	// Turn classes into space seperated string.
	$classes = implode( ' ', $classes ); ?>

	<?php do_action( 'ocean_mobile_menu_icon_before' ); ?>

	<div class="<?php echo esc_attr( $classes ); ?>">

		<?php do_action( 'ocean_before_mobile_icon' ); ?>

		<?php
		// If big header style.
		if ( 'big' === oceanwp_header_style() ) {
			?>
			<div class="container clr">
			<?php
		}
		?>

		<?php do_action( 'ocean_before_mobile_icon_inner' ); ?>

		<a href="#" class="mobile-menu" <?php echo $toggle_menu_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> aria-label="<?php esc_attr_e( 'Mobile Menu', 'oceanwp' ); ?>">
			<?php
			if ( 'default' !== $btn ) {
				?>
				<div class="hamburger hamburger--<?php echo esc_attr( $btn ); ?>" aria-expanded="false">
					<div class="hamburger-box">
						<div class="hamburger-inner"></div>
					</div>
				</div>
				<?php
			} else {
				?>
				<i class="<?php echo esc_attr( $icon ); ?>" aria-hidden="true"></i>
				<?php
			}

			// Mobile menu text.
			if ( get_theme_mod( 'ocean_mobile_menu_display_opening_text', true ) ) {
				?>
				<span class="oceanwp-text"><?php echo do_shortcode( $text ); ?></span>
				<span class="oceanwp-close-text"><?php echo do_shortcode( $close_text ); ?></span>
				<?php
			}
			?>
		</a>

		<?php do_action( 'ocean_after_mobile_icon_inner' ); ?>

		<?php
		// If big header style.
		if ( 'big' === oceanwp_header_style() ) {
			?>
			</div>
			<?php
		}
		?>

		<?php do_action( 'ocean_after_mobile_icon' ); ?>

	</div><!-- #oceanwp-mobile-menu-navbar -->

	<?php do_action( 'ocean_fibosearch' ); ?>

<?php endif; ?>

Then add some CSS to position FiboSearch input:

.search-style-overlay.fibosearch .dgwt-wcas-search-wrapp {
	margin-top: 25%;
}

Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

Before taking any actions, please make a full backup of your website (including the database).
I strongly recommend you test this code on your staging website before it goes live.

Regards,
Kris

• This reply was modified 3 years ago by Kris.

Hi @c0nst,

Thank you so much for your extensive reply!

It certainly seems to be working – thank you for that! Perhaps this could be added to the plugin’s documentation, as I reckon that there are plenty of people using this theme.

Great stuff making this work.

On my desktop computer, when I am customising WordPress, and when I use the mobile view, it looks great.

However, on my phone (iPhone SE 2020) I notice the following issues:

• The search bar is so high up, that it mostly disappears behind my phones “Top Bar” (where the network information, time, and other icons are shown). How can this be moved down, or to the center of the screen?
• There does not appear to be a “Close” button on this overlay search. As a result, the only way “out” is by clicking on a valid search result. How do we add a close button (same as in the menu search bar)?
• This is not a plugin question, but still: When the overlay is open, I cannot see much code when I use the Web Developer Tools in Firefox. Everything seems hidden with the overlay. As a result, I do not know which selectors are being used, and so I don’t know how to modify the first point. Perhaps you could let me know how to go about this?

Thank you again very much for your assistance.

I tried this on a staging site. I don’t seem able anymore to change my original post (more importantly, the provided URL), so please just add the subdomain staging-cl to that domain.

Kind regards,

• This reply was modified 3 years ago by loadofbikes.

Hi @loadofbikes

Thank you for your feedback. Our current OceanWP integration may be outdated. We will update the documentation entry about OceanWP mobile integrations.
To move the search bar down use this CSS.

.search-style-overlay.fibosearch .dgwt-wcas-search-wrapp {
	margin-top: 60%;
}
.search-style-overlay.fibosearch a.search-overlay-close,
.search-style-overlay.fibosearch a.search-overlay-close {
	top: -75px !important;
}

Add this code to the add_action( 'ocean_fibosearch', function ()... function:

<a href="#" class="fibosearch-mobile search-overlay-close" aria-label="Close this search form"><span></span></a>

right after <?php echo do_shortcode( '[fibosearch]' ); ?>. See screenshot: https://prnt.sc/lgtLh3DUVrNw

Could you share the screenshot of Web Developer Tools in the Firefox issue? I don’t use this tool, but maybe when I look at it I could help. Maybe changing the height of the overlay element would help you. Like on the screenshot: https://prnt.sc/fVpo2AqMyMty
You can use the Custom Style Script extension for Firefox to remember this CSS value and make it work only in your browser.

Regards,
Kris

Hi @c0nst,

Thank you very much again for your assistance. This did the trick. I struggled for quite a while, not understanding why I didn’t see a change on my tester phones, until I realised that there was a CDN besides the caches on the server…

Thank you for updating the docs on OceanWP. I am sure that many will be happy to see that they can use fibosearch on mobile as well!

I will leave the screenshot for now, as I have to run. Thank you for the offer, though!

Regards,