This tutorial provides the steps to implement Monochrome Pro's header search feature in Genesis Sample 2.8.0.
The idea is to show a search box covering the entire site header when a magnifying search icon at the right of nav menu is clicked.
As with the earlier tutorial for Showcase Pro, we shall use the WooCommerce’s default product search instead of WordPress’s if WooCommerce is active.
If WooCommerce is not active, we shall fall back to the default WordPress search.
Step 1
Edit functions.php.
a) Let us load Ion Icons' CSS since we will be using the search and close icon from this library.
Below
wp_enqueue_style( 'dashicons' );add
wp_enqueue_style( 'ionicons', '//unpkg.com/ionicons@4.4.4/dist/css/ionicons.min.css', array(), CHILD_THEME_VERSION );b) At the end, add
