Beaver Builder – Search Widget Module CSS

Search Widget Module style is controlled by Theme Settings. If you want to edit the style, you will need to use CSS.

I wrote these CSS. You just need to copy, edit and paste them at

  • Appearance > Customize > Custom CSS (or Additional CSS)
  • or Beaver Tools > Layout CSS & JavaScript > CSS

beaver-builder-search-widget-module0-min

CSS Code

Explain

Search Field

beaver-builder-search-widget-module2-min

Lines 06 – 25

Search Button

beaver-builder-search-widget-module2-min

Default Search Button will be hidden. You need to use display: block or inline-block to display it.

Lines 28 – 56

Center Search Button

Lines 59 – 61

beaver-builder-search-widget-module3-min

Search Field & Search Button Inline

beaver-builder-search-widget-module4-min

First you need to decrease the width of Search Field. Then use float: left;

Lines 64 – 67

Have suggestions? Please comment below 🙂 Thanks.

Share this post:

Leave a Comment