Mobile Bottom Menu Search Icon

  • Resolved sanil7

    (@sanil7)


    1 year, 5 months ago

    Hello I am trying to create a bottom menu for Mobile devices with a search icon. I have managed to add the Icon and Mobile Menu but I don’t know if it is possible or how to trigger search form by clicking a single link or a button.

Viewing 1 replies (of 1 total)
  • Plugin Support Kris

    (@c0nst)

    Hi @sanil7

    You can use this shortcode to display the FiboSearch icon that will trigger the mobile overlay search form:

    [fibosearch layout="icon" mobile_overlay="1"]

    it can be also use in PHP like this:

    <?php echo do_shortcode( '[fibosearch layout="icon" mobile_overlay="1"]' ); ?>

    If you want to use custom icon follow these tutorial:

    To add?<img>?or?<svg>?images use the?dgwt/wcas/form/magnifier_ico filter. Here are example codes:

    Your image (jpg, png)

    add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {

$html = '<img class="' . $class . '" src="https://your-domain.com/wp-content/uploads/2021/04/icon.png" alt="Search icon" width="20" height="20" />';

return $html;

}, 10, 2 );

    Your image (SVG)

    add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {
  $svg = '';
  ob_start();
  ?>
    <svg class="<?php echo $class; ?>" xmlns="https://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
      <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </svg>
  <?php
  $svg .= ob_get_clean();
  return $svg;
}, 10, 2 );

    You have two ways to add this code to your theme:

    1. Open the functions.php in your child theme and add the code at the end.
    2. or install the Code Snippets plugin and apply this code as a snippet.

    You can read more about FiboSearch custom icon here.

    Regards,
    Kris

Viewing 1 replies (of 1 total)
  • The topic ‘Mobile Bottom Menu Search Icon’ is closed to new replies.