This members-only tutorial provides the steps to implement this tutorial in Parallax Pro. Font Awesome search icon in the nav menu Full-screen overlay having the search box when the icon is clicked Tested in Parallax Pro 1.3.3. Step 1 Edit js/parallax.js. Before the closing }); at the end of the file, add $(‘#trigger-overlay’).click(function () { […]
search
Custom Genesis Search Template to show Results in a List
This tutorial provides the steps to display results on search pages in Genesis in a simple unordered list of linked titles. We shall copy search.php from parent Genesis into the child theme and add the code that adds opening unordered list tag above the entries changes `article` element for .entry to `li` adds closing unordered […]
Header Search in Business Pro
This tutorial provides the steps to add a magnifying glass search icon at the right of Primary nav menu in Business Pro, which when clicked, will show a search box covering the entire site header based on the code from Monochrome Pro. https://sridharkatakam.com/wp-content/uploads/2018/03/Screen-Recording-2018-03-29-at-12.16-pm.mov.mp4 Screenshots: Note: Assumes that Header Right widget area is not populated. Tested […]
Header Search in Genesis
This tutorial provides the steps to add a magnifying glass search icon at the right of Primary nav menu in Genesis, which when clicked, will show a search box covering the entire site header based on the code from Monochrome Pro. Screenshots: While the tutorial has been written for Genesis Sample 2.6.0, it should work […]
WooCommerce product search in Showcase Pro’s header
This article provides step-by-step instructions on implementing the header search from Monochrome Pro in Showcase Pro and displaying WooCommerce’s default product search instead of WordPress’s – covering the site header when a magnifying search icon at the right of nav menu is clicked. Screenshots: Homepage on page load: After clicking on the search icon: After […]
Font Awesome’s magnifying glass web font as search button text in Genesis
In the comments section of my old How to replace search button text with a icon font in Genesis tutorial, a user asked: I noticed when I enqueue Font Awesome 5, the search icon from this tutorial disappears, does that have something to do with the new icons being SVG? In this tutorial, I share […]
How to add an expandable search icon to the navigation in Infinity Pro
Updated on May 16, 2018 In Genesis Facebook group a user asked: How do you add a search form to your Genesis theme (in your nav bar)? (I googled the same question and a whole lot of different answers came up). I read that this used to be included and now you can add some […]
How to style the header search in Business Pro
A search widget placed in the Header Right widget area of Business Pro will appear like this: Want to make it sleeker like this? Step 1 Add the following in child theme’s functions.php: add_filter( ‘genesis_search_text’, ‘custom_search_text’ ); /** * Customize the text of the search input. * * @param string $text current text * @return string […]
Left aligned Primary navigation and right aligned Search box below header in Genesis
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 […]
How to implement Monochrome Pro’s Header Search in any Genesis theme
Monochrome Pro has code for adding magnifying glass icon at the end of primary nav menu items which when clicked, displays a wide search form covering the full header. I have published a tutorial that does this in Full width search form on top of header in Genesis tutorial in the past. In this tutorial, […]
Recent Comments