Styling of Search box not adhering

[49ideasParticipant]

One, I replaced the site search with Ajax Search Pro as you can see in the right side of the menu. It’s not adhering to the styles I setup in the option and the input box does not show text until after you type something and results- it’s tiny.

Also, it’s positioned differently in different browsers. It’s below the blue menu bar or inside it but not positioned correctly. I’ve attached a screen shot of what it should look like. When you click the icon it pulls up the search box. This is how the old search worked.

Those are the most import things, but less important is that I have a sticky menu bar and it works great in Chrome and Firefox, but doesn’t in Safari. If this can’t be helped, I’ll just disable the sticky feature, but thought I would ask.

Thanks in advance,

Isaiah

[Ernest MarcinkoKeymaster]

Hi!

I’m not sure if by the time you have managed to solve the issue, but it looks ok now on my side. Sorry I couldn’t get to you sooner, I had 2 more tickets on hold 🙂

Let me know!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[49ideasParticipant]

Ernest,

No it’s not fixed, Sorry, I tried something different from when I first wrote you. The issue with the way I tried it was it took up so much room in my navigation (I want it to appear when you click the icon), and two it reacts weird with the responsiveness.

I put it back to the original search, so you can see the way I would like it to be, but replaced with the new search pro plugin.

Since you have access to the site you can put the shortcode in the header yourself, or I can do it real quick and send you another note?

http://fairbanks.wpengine.com

Thank you in advance,

Isaiah

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

The styling of the outlining div needed to be reduced from 360 px to 310 px in the template header.php file, now it fits.
I also added a few lines after the wp_head() call, to make sure, that the window.resize event is called after the user clicks the search icon, so the text input of the ajax search fixes itself:

  <script>
    aspjQuery(document).ready(function(){
       aspjQuery('#NavSearchLink').click(function(){
           aspjQuery(window).resize();
       });
    });
  </script>

Please backup the header.php file from your template in case you need to reinstall it, so the changes persist 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[49ideasParticipant]

Ernest,

Thank you so very much!

Quick follow up, you might be able to point me in right direction – I understand that different browsers render things differently, but is there anyway to get rid of the round box around the search (and display font styling) in Safari so that it looks as sharp as it does in Chrome? screen shot attached.

Lastly,

Are you available for a job? Ultimately, I would like to create a search that looks like this: http://wpengine.com

utilizing your search engine for my site. I like how big and bold it is and want to make search a big and fun part of the site. Love what you are doing! Thanks again.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

No problem at all. I think it’s caused by a browser styling attribute, but I think it’s possible to turn it off. Try to add these lines to the site’s main css file:

input {
    -webkit-appearance: none !important;
    border-radius: 0 !important;
}

Here is an article about it: http://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

Unfortunately I’m not available for a custom job, sorry 🙂 I wish I had more time.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts