Course Search Bar Horizontal (Elementor)

[sohohosts]

Hi, How can I make the course search bar look in a horizontal row instead of the default from http://prnt.sc/u1uvlf   look like http://prnt.sc/u1uw6s  in Elementor.

[Diana]

If you will share page URL we can share custom CSS to fix this for you

[sohohosts]

https://staging.upskillslearning.com/home-3/ Please also advise where the CSS code will go as in Elementer does not allow to put CSS code.

[Jackson]

Hello, Inspect element is disable on your website, please deactivate the third-party plugin that is activated to perform this task: https://prnt.sc/u2599j After that i will inspect the page and make a custom css for you, Thanks,

[sohohosts]

Disabled

[Jackson]

Hello, Goto appearance>>customize>>custom css and use code given below: .page-template-notitle form#searchform { margin-top:90px !important; } .page-template-notitle form#searchform ul{ display: inline-flex !important; flex-flow: row wrap; gap: 10px; width:110% !important } .page-template-notitle form#searchform ul li{ flex-basis: 24%; min-width: 190px; } Refer: https://prnt.sc/u2lixy Thanks,

[sohohosts]

Brilliant - Thank You! I am also using it on the course listing page, what needs to be changed to have the same effect on it. https://staging.upskillslearning.com/course-directory-listing/ What should I be looking for if I use it on some other page, instead of bothering you again and again.

[Jackson]

Hello, USe code given below that will work for all page for this element: .page-template-notitle form#searchform { margin-top:90px !important; } form#searchform ul{ display: inline-flex !important; flex-flow: row wrap; gap: 10px; width:110% !important } form#searchform ul li{ flex-basis: 24%; min-width: 190px; } Refer: https://prnt.sc/u2oket Thanks,

[sohohosts]

Thank You. Fixed

[Jackson]

Hello, Okay, thanks for informing, Enjoy vide support, Cheers@@@ now i closed this topic

[Author]

Posts