This tutorial will provide the steps to add a search icon to the right of site header in Genesis Sample.
Header Search Icon, when clicked, will show a search box covering the entire site header similar to Monochrome Pro. It also works great in devices having No Javascript Enabled.
Preview:
This tutorial can be easily implemented on any other Genesis child theme with minor tweaks.
Let’s start…
Prerequisite:
Adding Search Box in Genesis is pretty easy but complicated when the area is under .site-header. Here what we are going to do today
- Adding Font Icon.
- Adding javascript for making the search box appear inline.
- Adding snippet in the site header to show the search form.
- Adding CSS to customize the appearance.
STEP 1
The first step is to Enqueue Ionicons. Add this in functions.php
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
STEP 2
A. Create a file search.js and place it under your child-theme/js/ folder and add the following script.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.