This tutorial provides the steps to add an elliptical search form below the primary nav (in HTML markup), wrap primary nav and the search in a custom div below the site header and style it using Flexbox. Screenshots: We shall use Ionicon's search font icon for the magnifying glass. At smaller widths, the search box will appear below the hamburger menu.
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme
Step 1In the function hooked to
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' );
Step 2Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.