This tutorial will provide the steps to add a search icon to the right of site header in Genesis Sample.
This tutorial can be easily implemented on any other Genesis child theme with minor tweaks.
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 snippet in the site header to show the search form.
- Adding CSS to customize the appearance.
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 );
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.