Add to header of website, on every page/post

[yolevskiParticipant]

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
Alexander

[Ernest MarcinkoKeymaster]

Hi 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 :)

[yolevskiParticipant]

I 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 .

[yolevskiParticipant]

Nevermind, 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??

[Ernest MarcinkoKeymaster]

Great 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 :)

[Author]

Posts