[Support request] Question regarding custom search bar in the Navigation

[Dominic]

Hello everybody.I just joined today and I really love the Theme.Its so well written/coded.
before I tried Avada. It doesnt even come close to GP.

here is my question:
I want to have a separate search in my navigation. I have found Ajax Search Lite and it worksbest for my sites purpose.
I want to have a streched out search bar from my Logo on the Left to the Home Link.
I implemented the search bar via shortcode.

I can adjust the length via CSS

div[id*=’ajaxsearchlite’].wpdreams_asl_container {
width: 500px;

,but the problem is,the search bar is not flexible on smaller screens and screws the whole navigation.
full-width,max-width etc doesnt work.
the best example how I would like it to look like is amazons search bar.
streched out,adjusts to smaller screens and stays in one row.

Its probably a simple solution but I just started to learn CSS 2 weeks ago.

Thanks in advance.

[Leo]

Hi there,

Can you link me to the site? Thanks!

[Dominic]

yes.
Here

[Leo]

Hmm I think the best way is to wrap your CSS like this:

@media (min-width:1550px) {
    CSS here
}

Otherwise you can try contacting the plugin developer.

[Dominic]

hi,I experimented a little bit but the problem still the same.

I implemented the search bar below the navigation,didnt change anything and the the searchbar behaves as I would like to. it automatically streches to the full width ,depending on the container size.
I think the problem has something to do with the navigation dimensions/spacing so that the search bar is automatically boxed to a certain size.

I think the CSS would have to be something like max-width or width:100% or auto.
I dont even know if implementing the search bar via shortcode is the best way.I just used it because it worked.

This link here

[Leo]

Hmm not sure what you mean?

The search bars below the navigation are inserted using Elementor.

Might be best to contact Ajax Search Lite plugin author and see if they can help you change the width.

[Dominic]

ok,I’ll try to show it with screenshots.
I just started to learn about CSS and english is not my first language. its hard to articulate myself.

I basically want it to look like this (except top padding). 1 row,the search bar is always covering the rest/left side of the navigation.
it should look like this on a full screen
[URL=http://www.directupload.net/file/d/4840/8t2q5gnm_jpg.htm][IMG]http://fs5.directupload.net/images/170909/temp/8t2q5gnm.jpg[/IMG][/URL]
and like this when the screen is smaller.
[URL=http://www.directupload.net/file/d/4840/vwpjknwz_png.htm][IMG]http://fs5.directupload.net/images/170909/temp/vwpjknwz.png[/IMG][/URL]

this happens when I change CSS to a certain pixel size. the search bar doesnt adjust to the smaller screen and the of the navigation creates a second row.
[URL=http://www.directupload.net/file/d/4840/oeflks rest l4_jpg.htm][IMG]http://fs5.directupload.net/images/170909/temp/oeflksl4.jpg[/IMG][/URL]

please keep in mind: maybe your first suggestion was right but I did something wrong.I can only change small things.I cant code myself and I dont know many basics.

[Leo]

My way above let you specify a certain width for screen size above 1550px, and then the default style applies for screen width below that.

The coding structure is a bit complicated for that plugin. Have you tried asking their support on how to use CSS to change the width?

[Dominic]

I will ask them in their forum later today or tomorrow. but I still think it has something to do with the Column or Grid (?) Size in the Navigation which limits the search bar in width.
I probably try to create a mega menu because its to complicated for me.

thank you anyway

[Leo]

Let me know what they say!

[Dominic]

I just wanted to say your advice was correct.I applied it wrong.I still know to little about CSS.

its not flexible as I want it to be,but it does the job for now.
I will still ask ajax search support and let you know if they help me.

[Author]

Posts