This tutorial contains a download folder which includes 3 different code snippets providing 3 different ways to add a search form in the primary nav menu of the Academy Pro theme by StudioPress.
Method 1 – Adds a search form to the last menu item using the default styling.
Method 2 – Adds a expanding search box using the default styling :
Method 3 – Removes the default styling and adds a animated search form with search icon like you see in the following 2 screenshots :
Expanded :
Demo Methods 2 & 3 #
Shows method 2 with the search box expanding using the default styling.
Shows method 3 with a icon added before the search form input text expanding with the border removed.
Code Installation #
Installation of code relates to usage of the files inside the download folder for registered members :
Method 1
There’s 2 steps :
Step 1 – Copy & paste the CSS from the file named style-1.css to the end of the Academy Pro themes style sheet and clear caching.
Step 2 – Copy & paste the PHP code from the functions.php file to the end of the Academy Pro themes functions file.