Adding the toggle search icon at Themer header’s menu module

I saw this kind of request on Beaver Builder FB group. It was a little bit challenging part because there have no inbuilt module for toggle search form. I played with Beaver Builder Plugin’s code and found the solutions. I am sharing the tips here.

Minimum requirements are Beaver Builder Plugin, Themer Addon and Beaver Builder Theme.

Step 1: Creating the site header using Themer

  1. Navigate to Builder -> Theme Layouts
  2. Click on Add New button
  3. Enter Title
  4. Select Type “Theme Layout”
  5. Select Layout “Header”
  6. Click on Add Theme Layout button
  7. You will redirect to another page
  8. Do the other setup under Theme Layout Settings section if required
  9. Click on Launch Page Builder button
  10. Create the site Header. Make sure that you are using the Menu module for your site header

Step 2: Adding unique class into Menu module

  1. Click on “Rench” icon of Menu module
  2. Click on Advanced tab
  3. Enter “add-search-icon” class into class input field
  4. Save the module now

Step 3: Adding custom PHP script into functions.php file

You need some PHP code to display the search form with search icon. Open the functions.php of your beaver builder child theme and add this small snippet there

I checked the core files of beaver builder plugin. There have hooks for module. So you can add some extra new content before/after the module. I used the after hook (fl_builder_after_render_module) and adding the search form at right side of the menu module.

Line no 10: Checking that site is using the Beaver theme
Line no 15-16: If menu module have “add-search-icon” call, saving that module’s id in a variable
Line no 18-22: Displaying the toggle search icon.

Step 4: Adding some custom CSS

For my cases search icon is not coming at proper position. So I added some CSS in the style.css of beaver builder child theme. Here is the code:

8 Comments

  1. Brittany on April 16, 2019 at 8:40 pm

    On my site, the search icon slightly moves with every page load. Can you help?

    • WP Beaver World on April 17, 2019 at 2:33 am

      Can you share the site URL & wp-admin access via contact form?

  2. John on January 9, 2019 at 11:21 pm

    It worked for me, thanks!

    Here I’ve changed to return $module; at line 24 to work.

    Cheers

  3. Peter on January 25, 2018 at 8:59 pm

    Customizer > Header > Nav Layout must have Nav Search Icon turned on

  4. Ryan on January 22, 2018 at 5:03 am

    Would there be a way to edit the function to target the Astra Theme?

    • WP Beaver World on January 22, 2018 at 12:11 pm

      Astra have not inbuilt toggle search icon like BB theme. You will need extra CSS and JS for it.

  5. Jared on November 29, 2017 at 2:12 am

    This isn’t working for me. Nothing is showing. Any thoughts?

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares