Guide add search bar on articles

2 コメント

  • Danila Slezko

    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">

    <div class="search-container">
    <svg xmlns="" 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"/>
    {{search submit=false}}


    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


  • Chris Horroll

    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



Powered by Zendesk