Guide add search bar on articles
Hi All,
On the copenhagen theme for Zendesk guide, at the top of any article page you have the small search bar.
On the theme I currently use, I don't have a search bar like that at the top. Instead, I have one large one at the bottom of the article.
Would anyone be able to advise me how I go about replicating a small search bar at the top of the article pages. Any help or instructions are appreciated
Thanks
Chris
-
Hi Chris,
What I did in the same situation:
1) First of all, you should decide on which template you want to place a small search bar on the top.
2) After that, you could copy code from the Copenhagen theme and add it to the template in your theme. You should add to the top of your template - similar to in Copenhagen theme. You could find below code with Breadcrumbs and a small search panel. Or you could find the same code in the Category.hbs, Section.hbs, and Article.hbs template.
<nav class="sub-nav">
{{breadcrumbs}}
<div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false}}</div>
</nav>3) Then you should copy and paste CSS styles from the Copenhagen theme to your theme. Classes: sub-nav , search-container, search-icon. You could find all of these classes in the Copenhagen theme in the style.css.
4) Finally you will need to modify some parameters in your styles and position on your page for the search panel in your theme. it can be most hardly step.
5) Remove your search panel at the bottom of your theme.
I hope it will be helpful
-
Thanks for your help and the code tips. You pointed me in the right places and with lots of trial and error with the styles & position, I got it to work :) Much appreciated
Please sign in to leave a comment.
2 Comments