Archived topic
Help with walkthrough on how to add a search under the menubar
5 replies · Started by TJ on March 15, 2021
Hello,
I'm totally new to Wordpress, and have found my way so far without too much trouble, but I'm struggling with this one. I *think* I could do what I want by using a Header Element to add the search, but I just can't wrap my head around how to get it all set up.
I'd like to have a Search in a space under the menubar, with background color and roughly the same height as the header above the menu, that will be present only on the Home page and will scroll up under the sticky menu as visitors scroll.
My site is here: https://shopdoge.xyz/
I have shortcode for the search included with the Directories Pro plugin:
[drts-directory-search directory="my_directory"]
I just cannot figure out how to get this all set up.
Can someone please walk me through with a step-by-step on how to make this happen?
Many thanks for your assistance.
Hi there,
You can use Hook Element to insert your shortcode to specific areas within the page.
https://docs.generatepress.com/article/hooks-element-overview/
As for which hook to place set on your Hook Element, you can refer to our hook visual guide:
https://docs.generatepress.com/article/hooks-visual-guide/
You can place your shortcode inside a Hook Element, set the display rule location to the pages you want it to display on and set the hook to either generate_after_header or generate_inside_container hook. Make sure "Execute Shortcodes" is checked so the shortcode runs.
Example setting/s:
Settings tab - https://share.getcloudapp.com/YEuXn5bD
Display rules tab - https://share.getcloudapp.com/xQun1Gk5
Hi Elvin,
Thank you so much for your help! Using this method I assume I'll be able to style the container for the search as needed?
Thank you so much for your help! Using this method I assume I’ll be able to style the container for the search as needed?
The styling depends on how you've structured your Hook Element's coding or what HTML elements the shortcode renders.
I'm not exactly sure what HTML element the shortcode you've provided renders but you should be able to inspect the page after adding it to check for CSS selectors you can use to style it using custom CSS.
Great, thank you.
No problem. Let us know if you need further help. :)
