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 Ernest Marcinko Ernest Marcinko 7 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10200
    yolevski
    yolevski
    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
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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
    yolevski
    yolevski
    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
    yolevski
    yolevski
    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
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.