Adding 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 bullet:HTML


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

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


.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;
            	}
            }

How to add a custom search bar