[Resolved] Integrate ajax search lite

[Henk]

Hi,

Currently I’m using the plugin Ajax search lite.
The search button is now at the right of the main navigation menu items.

When I press the search button, the search box is left aligned how can I change that?
Further, to close the search box, the X is displayed at an unlogic place, how can I change that also?

Thanks,
Henk

[Ying]

Hi Henk,

You can try this CSS for desktop:

div[id*='ajaxsearchlite'].wpdreams_asl_container {
    margin-left: auto;
    margin-right: 5%;
}

What’s your plan for the mobile? Where do you want the search icon and close icon to be?

[Henk]

Hi Ying,

Thanks, that works.
For mobile, good that you mentioned it, I forgot it almost…

Below the main menu?
Or do you have a better idea that’s more visitor friendly?

[Ying]

I think below the main menu is a good option, try this CSS:

@media (max-width: 768px) {
    div[id*='ajaxsearchlite'].wpdreams_asl_container {
        margin-top: 50px;
    }
}
@media (min-width: 769px) and (max-width:1024px) {
    div[id*='ajaxsearchlite'].wpdreams_asl_container {
        margin-top: 70px;
    }
}

Let me know 🙂

[Henk]

Hi Yin,

Thanks.
Mobile works. For desktop I modified your CSS, but that doesn’t work?!
Can you tell me what is miss?

@media (max-width: 768px) {
    div[id*='ajaxsearchlite'].wpdreams_asl_container {
        margin-top: 50px;
    }
}
@media (min-width: 769px) and (max-width:1024px) {
    div[id*='ajaxsearchlite'].wpdreams_asl_container {
        margin-top: 70px;
	margin-left: auto;
    margin-right: 5%;
    }
}

[Ying]

Did you add this CSS as well for desktop?
https://generatepress.com/forums/topic/integrate-ajax-search-lite/#post-2079577

@media (min-width: 769px) and (max-width:1024px)

This is for tablet.

[Henk]

Owwww, checked everything but I didn’t see that part….

Thanks Yin.

[Ying]

You are welcome 🙂

[Author]

Posts