Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. Customizing the Site Search

Customizing the Site Search

The site search refers to the website search feature. You get to configure the site search from placement, aesthetics and design perspective.

Following are the settings available for the site search configuration. Navigate to your website admin, browse to Appearance > Customize > Header > Site Search.

Enable the Site Search

You just need to click over the checkbox next to the “Enable Site Search” label to activate it.

Define the Search Location

 You can display the site search at any of the following locations. You just need to have the search location activated to be able to use that location for adding site search to.

  • Main Menu
    • The primary navigation of the website.
  • Functions Menu
    • The menu right next to the social icons
  • Top Bar
    • The top bar of the website

You can choose one of these just by clicking over the dropdown under the “Search Location” label in the Site Search panel.

Choose a Search Style

You can choose any search style out of the three provided options. These options are

  • Dropdown
    • When you click over the search icon, it animates the search input box to screen right below the search icon
    • The user can easily fill that search input box, and press enter to find out the search results
  • Main Menu Replace
    • As you click over the icon, it replaces the icon with a horizontal placeholder and a search close button right next to it
    • The user can type in the placeholder and hit enter to find search results.
  • Overlay
    • Clicking the search icon pops open a full-screen overlay
    • The overlay contains a centered underline, which is actually the input box for the search
    • There’s an “X” button close by, right above the search input to close the overlay as well.

Simply just click over the dropdown under the “Search Style” label in the Site Search panel to select the search style.

Setting the Search Dropdown Width

Increasing or decreasing the site search width actually increases or decrease the input box width for the site search.

You can use the slider to adjust the dropdown width, available under the “Search Dropdown Width (px)” label in the Site Search panel.

Choosing a Search Icon

You are provided with four default icons to choose for the search icon. The fifth one is an empty box representing no icon.

Just click over any icon under the “Search Icon” label in the Site Search panel to choose the search icon.

Setting a Custom Search Icon

Just enter your full icon class inside the input box provided under the “Custom Search Icon” label in the Site Search panel to do so.

Set the Search Icon Size in Pixels

You can choose to change the search icon size, to either expand it or contract it based over your preferences.

To do so, just use the slider available under the “Search Icon Size (px)” in the Site Search panel.

Center the Search Icon Vertically

If you want to fine-tune the search icon alignment, you can vertically center the icon using this option.

Simply use the slider under the “Search Icon Center Vertically” label in the Site Search panel to do so.

Change the Search Icon Color

The search icon color can be changed to any color of your choice.

Simply click over the “Select Color” button under the “Search Icon Color” label in the Site Search panel.

Change the Input Background Color

The input boxes are a part of almost every form. It could be useful to change its background, for example, if you have a website for kids. It could be more engaging to design a colorful form,

Just click over the “Select Color” button under the “Input Background Color” label in the Site Search panel.

Change the Input Color

When you change the input background, it’s important to change the input color to contrast with it. You need to make sure the input text is readable and looks good too!

Simply click over the “Select Color” button under the “Input Color” label in the Site Search panel.

Change the Input Border Color

The input border can be changed to suit the design needs.

Just click over the “Select Color” button under the “Input Border Color” label in the Site Search panel.

Change the Input Border Color: Focus

If you want to change the border color of input boxes, as you click over it to type anything. You can do so too, usually known as element focus.

Click over the “Select Color” button under the “Input Border Color: Focus” label in the Site Search panel.

– Main Menu –

For the main menu search location, you can change the following settings:

Input Background Color: Input Color

Additionally, you can also change the following:

Button Color

You can change the search button color with the Main Menu search location.

Just click over the “Select Color” button underneath the “Button Color” label in the Site Search panel to do so.

Button Hover: Color

With the main menu search location, you can also change the mouse-over color for the search button.

Simply click over the “Select Color” button under the “Button Hover: Color” label in the Site Search panel to do so.

Main Menu Replace Search Style

Using the “Main Menu Replace” search style, you get the following settings to configure:

  • Search Icon
  • Custom Search Icon
  • Search Icon Size (px)
  • Search Icon Center Vertically
  • Search Icon Color

These are the same settings we have discussed under the dropdown search style and serve the same purpose.

Overlay

For the overlay Search Style, we get to configure the following settings:

  • Search Icon
  • Custom Search Icon
  • Search Icon Size (px)
  • Search Icon Center Vertically
  • Search Icon Color
  • Overlay Background Color
  • Input Color
  • Input Placeholder Color
  • Input Dashed Text Color
  • Input Border Color
  • Input Border Color: Hover
  • Input Border Color: Focus
  • Close Button Color

We have discussed quite a few of these settings under the Dropdown search style. So we will explore the new settings here.

Overlay Background Color

 You will see an overlay screen as you click over the search icon. If you want to change the background color for the full-screen overlay. You can do so using this setting.

Just click over the “Select Color” button under the “Overlay Background Color” label in the Site Search panel and choose the desired color.

Input Placeholder Color

A placeholder is a text you see in an input box that’s there until you (focus) place your cursor and start typing in the input box. For example, a placeholder for the Name could be “Enter Your Full Name”.

Using this setting, you can change the placeholder color for the input. Just by clicking over the “Select Color” button under the “Input Placeholder Color” label in the Site Search panel and to choose your desired color.

Input Dashed Text Color

To choose a desired color for the setting, just click over the “Select Color” button under the “Input Dashed Text Color” label in the Site Search panel.

Input Border Color: Hover

You can change the input box (from overlay screen) border color on hover (mouse-over),

To choose the desired color, just click over the “Select Color” button underneath the “Input Border Color: Hover” label in the Site Search panel.

Close Button Color

You can easily change the color of the cross sign, the close button on the overlay screen.

Simply click “Select Color” button under the “Close Button Color” label in the Site Search panel.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?