Add to header of website, on every page/post

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

 
Keymaster
5 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10200

    Participant

    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

    #10212

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


    #10228

    Participant

    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 .

    #10229

    Participant

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

    #10232

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


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.