Compatibility with another plugin

[Ernest Marcinko]

Hi Yaseen!

Can you please tell me which file it was you edited to put the search to the header?

[Yaseen]

Hi Ernest,

Its the same file you edited yourself. This is what you did:
“To answer your other ticket as well:
I’ve made another search instance “Header search bar” for you and placed it to the header bar. The file I had to edit was the wp-content/themes/jupiter/views/header/global/search.php.
I did a basic styling and enabled compact mode for that instance, so it acts similarly as the previous search there. Feel free to style it 🙂 I hope it is what you needed.

If you don’t need that, just remove this code from that file:

<?php
/* Ajax Search Pro bar START */
echo ‘<div class=”mk-header-search”>’;
echo do_shortcode(‘[wpdreams_ajaxsearchpro id=4]‘);
echo ‘</div>’;
return false;
/* Ajax Search Pro bar END */
?>
Best,
Ernest Marcinko
“

[Yaseen]

Hi Ernest,

This is a kind reminder of my issue.

Thanks in advance,
Yaseen

[Ernest Marcinko]

Hi!

I’m asking because currently the search is currently on on that place where your screenshot shows: https://wp-dreams.com/wp-content/uploads/2016/03/22/yaseen/8131/yaseen/Screen-Shot-2016-03-25-at-9.11.10-PM.png?3a5cc6

Currently I can see it where I originally put it: http://i.imgur.com/79yBsbp.png

Can you please put it beside the logo so I can check the problem, or tell me which file to edit to put it beside the logo?

[Yaseen]

Hi,

Oh sorry i forgot to tell you that i removed the code there.
I edited the file wp-content/themes/jupiter/views/header/styles/header-2.php

Thanks,
Yaseen

[Ernest Marcinko]

Hi!

The problem is that the logo container is not a flexible element, so it’s hard to place it there without the theme authors suggestions.

I placed the 4th search instance to the file you suggested and applied the following custom CSS rules:

[html]#ajaxsearchpro4_1 {
display: block;
vertical-align: middle;
flex-grow: 1;
flex-basis: 500px;
}

#ajaxsearchpro4_1 .probox svg {
vertical-align: top !important;
}

.header-logo {
display: inline-block;
width: auto;
}

.add-header-height {
justify-content: center;
display: flex;
align-items: flex-start;
align-items: center;
}[/html]

This changes the logo container to a display: flex; element, which allows growing/shrinking based on the screen width. (these rules you can find on the Custom CSS section of the 4th search instance). This is not a final solution, you will have to test different resolutions as well. I’m way beyond my support duties helping you with the customizations, I hope you understand.

I also suggest asking the theme developer in case you need a better suggestion on where to exactly put the module, he might know much better implementation than I do.

[Yaseen]

Hi Ernest,

Thanks for your great support. I appreciate your help.

Regards,
Yaseen

[Author]

Posts