How to add a custom search bar

Adding a search bar to your website enhances user experience by allowing visitors to find content quickly. This guide walks you through implementing a custom search bar using HTML and CSS.

  1. Add the following code inside a code block on your Notion page. Below the code block, include a caption labelled as a bullet:HTML
javascript 

`<div class="bullet-search">`
    `<div class="panel is-link bullet-panel">`
        `<div class="panel-block">`
            `<p class="control has-icons-left">`
                `<span class="icon is-left">`
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" style="width: 1.2rem; height: 1.2rem;">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z">`</path>`
                    `</svg>`
                `</span>`
                <input data-origin="" id="bullet-search-input" class="input bullet-search-input" type="text"
                    placeholder="Search...">
            `</p>`
        `</div>`
    `</div>`
`</div>`

<br />

  1. Copy and paste the following custom code inside "Code" > "CSS"
javascript 

.panel {
            border-radius: 20px;
            }

            .notion-custom-code .panel {
                border-radius: 50px;
            }

            .bullet-panel .panel-block{
                border: unset;
            }

            .panel{
                box-shadow: 0px 0px 3px 0px lightgray;
            }

            .notion-custom-code {
                width: 100%;
            }

            .has-icons-left {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .is-left svg {
                width: 1.5rem !important;
                height: 1.5rem !important;
                color: var(--fg-color-6);
            }

            input::placeholder {

                font-size: 1.3rem;

                color: var(--fg-color-6);

            }

            .bullet-search-input {
                font-size: 1.3rem;
                padding-left: unset;
            }

            .control.has-icons-left .icon {
                position: unset;
            }

            .control.has-icons-left .input {
                padding-left: unset;
            }

            .notion-custom-code .bullet-panel {
                margin-top: 0px;
            }

            @media(min-width: 800px){
                .notion-custom-code .bullet-panel{
                    max-width:66vw;
                }
            }