Searchbar in article - Knowledge Base

Hi Xenia Georgopoulou

Is it possible for you to share the code of the two following template

-  category_page.hbs

-  article_page.hbs

so that I can help you out by adding the search-bar on the article template 

Thanks 

Pulkit

Hi Xenia Georgopoulou,

Follow the below steps:

i). Go to your theme to edit mode.

ii). Open your category_page.hbs file.

iii). Copy the searchbar code which start from a div -

<div class="search search-lg text-base font-size-lg lg:font-size-xl">

other code is here

</div>

 Screenshot for the same:

iii). Now, open your article_page.hbs file.

iv). Paste that copied code just after the <nav ..> </nav> code.

nav code:

<nav class="inline-flex p-3 font-size-md bg-translucent border-radius">

</nav>

searchbar code:

<div class="search search-lg text-base font-size-lg lg:font-size-xl">

<svg ....>

</div>

Screenshot for the same:

If any confusion feel free to ask :)

Team

Thank you all so much for your help!
@Ifra Saqlain I tried your method and got the searchbar in every article.
Now the only thing I would like is it to be a little bit smaller in height, so that it doesn't "fall" on the title..



Category_page code that I copied was this:

And then paste it here in aritcle_page:


Can you please help me with that too?

Thank you in advance!

Xenia Georgopoulou, you only need add a class name to your article_page.hbs search-bar, see how I did:

I added mb-6 class to the search-bar wrapper for article page. it doesn't relate to height, it causes of bottom space.

You can add space as per your requirement, 

mb-4 - margin-bottom: 1rem;

mb-6 - margin-bottom: 2rem;

mb-8 - margin-bottom: 4rem;

Thank you so much! It worked!!
Have a nice week!

You too :)