Archived topic
Search Bar at the very top of page
13 replies · Started by Craig on February 4, 2022
Hi - little confounded on how to place the AWS search widget shortcode at the very top of the page. I've created an Element, Hook, but can't seem to select the right spot for it to show up at the very top of our page, above a SmartSlider3 we are using.
I have using Generate Blocks as well. Any suggestions?
Thanks so much! Craig
Hi Craig,
I'm not sure if I understand the statement here:
can’t seem to select the right spot for it to show up at the very top of our page, above a SmartSlider3 we are using.
So do you want to place the search bar at the very top of the page (above the blue bar) or just above the slider which won't be the very top of the page?
Sorry Leo -
Trying to stretch it out across the very top of the page. Above the locations/phone numbers information. Anytime I put a hook / wp-header or use the Top Bar widget, it seems to put it next to the logo, or to the very right of the navigation.
THANKS! Craig
Try using the before_header hook with priority of 2.
Leo - thanks a million, that worked! Need to style it a bit then we'll implement.
Something I was thinking about - is there a way to just put the Search Icon (the magnifier) to the very right (last right item) in the primary navigation?
Thanks, Craig
This should help:
https://docs.generatepress.com/article/navigation-search/
Leo - so many thanks, I've got the magnifier now to the right. But question on the styling, because the search box that drops kind of takes up part of the blue area in the primary navigation, and then drops below it. Kinda half and half. How would you recommend styling this?
Thanks Leo!
Craig
Hmm what you are seeing is not the default style of GP's navigation search.
Are you using another search plugin by any chance?
Can you disable it first?
This should be the default style:
https://gpsites.co/health/
Ok, sorry, I am using AWS - Advanced Woo Search, there is another bar before the fold on the home page. I like the AJAX functionality and how it formats the listing. So, if this isn't "your" cup of tea to diagnose, I can contact their support.
Please advise. THANKS LEO!
Craig
If you want to use AWS – Advanced Woo Search then you would want to disable the navigation search from GP.
I did the same for the Prime template in our site library:
https://gpsites.co/prime/
Yep, that is what I did, and then I just can't figure out how to style it, cause it looks wonky when you hit the magnifier glass. It kinda falls off the navigation.
I thought the navigation search icon only exists with GP's navigation search activated so it shouldn't be an issue if you deactivate it as I suggested above.
You are correct. AWS has a feature where it can "take over" the search function. So when I do enable the Navigation Search in GP, it uses the AWS script, if that makes sense. I just can't figure out how to style it better, but I've got an email into their support. Thanks so much Leo.
Craig
No problem :)