Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Add to header of website, on every page/post
- This topic has 4 replies, 2 voices, and was last updated 9 years, 8 months ago by
Ernest Marcinko.
-
AuthorPosts
-
September 20, 2016 at 3:14 pm #10200
yolevski
ParticipantI 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 #10212Ernest Marcinko
KeymasterHi 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.
September 22, 2016 at 7:11 pm #10228yolevski
ParticipantI 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 #10229yolevski
ParticipantNevermind, 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 #10232Ernest Marcinko
KeymasterGreat 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:
[html]@media screen and (-webkit-min-device-pixel-ratio:0) {
.proinput input {
font-size: font-size: 16px;
}
}[/html]or if that doesn’t work, maybe this one:
[html]@media only screen and (max-width: 720px) {
.proinput input {
font-size: font-size: 16px !important;
}
}[/html]Another possible solution is to tell the device not to scale, by putting this into the site header:
[html]<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />[/html]
Let’s hope one of these will work.
-
AuthorPosts
- You must be logged in to reply to this topic.