Animated Search Form In Header Right Widget – Genesis Sample Theme

The 2 solutions in this tutorial add back the header right widget area and also includes code to vertically align the search widget in this widget area like this.

The code also adds back the after header nav menu.

All header elements including title area, header right widget area and after header menu are centered on smaller screens like this :

Demo Video #

Shows the header right widget area containing the WordPress Search widget styled so it animates the search text input on click.

Also shows the after header menu added back and all elements centered on smaller screens.

Tested using the Genesis Sample child theme by StudioPress.

Icon To Right #

You can also use difference CSS & icon images to position the magnifying glass to the right of the search forms input like this :

Use the CSS and images from the 2nd download folder if you want this solution.

Code Installation – From Download Folder #

There’s 4 steps :

Step 1 – In config > menus.php, change the name of the Header Menu to After header Menu like this :

return array(
    'primary'   => __( 'After Header Menu', 'genesis-sample' ),
    'secondary' => __( 'Footer Menu', 'genesis-sample' ),
);

Related Tutorials

• Expanding Search Box In Header Right – Genesis Sample Theme