Ajax pro with elementor compatibility

[AmeliaParticipant]

Dear I bought ajax pro version because of all this good recommendations and I’m creating different search bars, but they are not working as expected with elementor. It looks different when putted in via shortcode on elementor. Is there an other way to put it in to elementor search widget directly? not via shortcode because I was yesterday all day busy trying to adjust it for mobile but it’s not working. I made one search box with compact to put it on mobile it looks very nice but it slides to the side and not down, I added I video of how I want it to slide because there is not much place on the mobile menu. This is what I wanted to do with the comact icon, I tried all of the demo’s every configuration and I can not find it, maybe you could show me or say what I have to do to make it compatible with elementor and mobile version to drop down like results because there is no place for him to slide to the side.

With kind regards, Amelia

[Ernest MarcinkoKeymaster]

Hi Amelia,

Unfortunately the video didn’t came through, it might be over the allowed size. Can you please try uploading it to youtube or streamable or somewhere else? Thank you very much!

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

[AmeliaParticipant]

Dear Ernest,
thank you for your fast reply, I made pictures. https://www.naturisimo.com/ this is the site if you see their mobile menu you and this search icon you will understand what I mean. I made pictures of my website and how my menu looks like. I putted in my mobile menu usual search widget of elementor but I wish I could put like this but yours. Because it’s not comparably with ajax lite pro and how it works. ButI just cannot put it there like this. See pictures please. It breaks the layout, I make a ajax search bar, I generate or use the standard shortcode I place it where I want it via elementor but the outcome is totally different.

Attachments:

You must be logged in to view attached files.

[AmeliaParticipant]

The first picture is usual search box of elementor, in his place I wan ajax compact search icon and if it would have the drop down behavior instead of slide to the side. But the maximum of configurations I coudl get yesterday was the second picture as you can see

[Ernest MarcinkoKeymaster]

Hi,

Okay, I think I see what you mean now. The problem is, that the search on the second site is specifically made that way, and is integrated into the theme. The elementor full screen search is also a similar thing, it is a completely different widget from the regular theme search, that cannot be simply replaced.

The closest possible feature in ajax search pro is the compact search bar. You could maybe try using that on the mobile menu as a shortcode. You can even use a fixed layout for it, so it bascially floats on the sidebar, like on our demo.

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

[AmeliaParticipant]

Yes, that’s what I did but it does not integrate with this, it shows differently even if I do without compact it this layout is not working. You see the second picture, it creates a big space between two columns.

[AmeliaParticipant]

Float on the sidebar I don’t like, I will have an other thing. And this php code you provide is this not for this? Do you have some examples where ajax search is beautifly aligned on the mobile search. I put it under the mobile menu and creates a huge space between this too. you see. I bought the pro version because I thought I would be able to do this. Oceanwp has oceanwp widgets with dropdown search?

[AmeliaParticipant]

So with other words, I can not use ajax pro search on mobile? you can see yourself that it does not align, I paid €32 for this hoping this was the answer but now I cannot even use it.

[AmeliaParticipant]

You see even on the big screen the shortcode does not go that smooth aligned it changes place once on the screen

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

The PHP shortcode is to be used within the theme files directly, it is mostly for developers, that won’t help in this case.
I understand, but the alignment is hugely dependent on the container elements and their styling. All the plugin does is, it prints out the search bar where you place the shortcode. If there are other CSS rules that may conflict, the cannot be affected by the plugin preemptively, that is much more complicated than that.

If you want, you can put the shortcode there, I will take a look where the margin/padding is coming from via the browser debug tools. In most cases it is completely unrelated to the plugin. Please make sure to pinpoint where the extra margin/padding is, as I might not be as familiar with the original layout. In most cases, using some custom CSS can patch anything. Thank you very much!

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

[Ernest MarcinkoKeymaster]

The alignment issue on the full screen is because of the difference in margin of the container element and that it’s aligned to the middle, and not to the bottom. You can very easily fix it by using this custom CSS:

@media only screen and (min-width: 768px) {
    .asp_m_1 {
        margin-top: 12px !important;
    }
}

That should fix it for the desktop version. Let me know about the mobile version as well.

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

[AmeliaParticipant]

Where should this css code have to go? Custom css, custom css of ajax or in shortcode custom css of elementor?

[AmeliaParticipant]

Because when I put this in elementor it does not change anything

[AmeliaParticipant]

I placed this in custom css of wordpress and it works, but the placeholder word “zoeken” stands so close to the bottom line. Ok Ernest I will place all the search bars where I want them to be and then contact you for the alighment. On the mobile version I think it’s not possible to use right now because a whole box only for search is too much place. I hope one day it will be possible to make it dropdown the compact icon because it’s really necessary, all the mobile menu’s I saw on different sites have this same alignment, I compact menu that drops down when clicked on it. It was also my expectation but I should have known better. Do you have some examples of how they use ajax pro on the little screens? So I could try this?

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts