Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Add to header of website, on every page/post
This topic contains 4 replies, has 2 voices, and was last updated by Ernest Marcinko 7 years, 2 months ago.
- AuthorPosts
- September 20, 2016 at 3:14 pm #10200
I want to add the same search bar thats on our homepage, at the top of every single page and post.. anyway to put it in the header or navigation ?
Thanks
AlexanderSeptember 21, 2016 at 9:10 pm #10212Hi Alexander,
The only way is to manually add the PHP shortcode to the corresponding file in the theme directory. (unless there is a widgetized area there). Unfortunately there is no “exact” recipe of doing so, as all themes are very different from each other.
Most themes use the header.php file to display the site header and navigation, so that’s probably a good starting point. I highly suggest asking the theme developer for the exact location, he might know where to look for it.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
September 22, 2016 at 7:11 pm #10228I was able to add it to my header. you can see it here: http://www.truecondos.com
however, it doesn’t have the styling or settings i set .
September 22, 2016 at 7:21 pm #10229Nevermind, i fixed that.
But what i noticed is when you visit the site on mobile, and click in the search to start typing, the whole screen zooms in which cuts off the results when they appear.
how can i avoid the zoom in when searching on mobile??
September 23, 2016 at 7:51 am #10232Great job!
The zoom thing is automatic on all devices, and there is no programatical way of avoiding it. It usually happens when the site width is a bit bigger than the device max-width, mostly on iPhone devices.
After some research, I have found that in some cases when the zooming happens, the following custom CSS code:
@media screen and (-webkit-min-device-pixel-ratio:0) { .proinput input { font-size: font-size: 16px; } }
or if that doesn’t work, maybe this one:
@media only screen and (max-width: 720px) { .proinput input { font-size: font-size: 16px !important; } }
Another possible solution is to tell the device not to scale, by putting this into the site header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Let’s hope one of these will work.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.