Tutorial

Mobile search button

Create a search button in the mobile navigation

In some situations we need a search button in the navigation bar on mobile view. Here's how to do it.

1 - Use the following code to create a navigation. You may notice that there is a contact form inside the body of the navigation.

Copy

<nav id="navigation" class="navigation navigation-justified">
    <div class="navigation-header">
        <div class="navigation-brand-text align-to-left">
            <a href="#">NAVIGATION</a>
        </div>
        <a class="navigation-search-btn search-panel-trigger" href="#">
            <i class="fas fa-search"></i>
        </a>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
        <div class="navigation-search-panel">
            <span class="navigation-search-panel-close-button">&#10005;</span>
            <form>
                <input type="search" name="search" placeholder="Type and hit enter">
            </form>
        </div>
    </div>
</nav>

We created a link inside "navigation-header" with the classes "navigation-search-btn" and "search-panel-trigger". We are using an Font Awesome icon inside it. The class "search-panel-trigger" will be used to identify which element will be used to trigger the search panel.

2 - Use the CSS code below to give some styles to the search panel:

Copy

.navigation-search-panel {
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
    top: 0;
    left: -100%;
    background: #fff;
    z-index: 999999;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.navigation-search-panel.is-visible {
    opacity: 1;
    left: 0;
}

.navigation-search-panel form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.navigation-search-panel input {
    width: 80%;
    padding: 15px;
    font-size: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.03);
    text-align: center;
}

.navigation-search-panel-close-button {
    position: absolute;
    font-size: 25px;
    cursor: pointer;
    top: 20px;
    right: 20px;
}

3 - Use the CSS code below to give some styles to the search button:

Copy

.navigation-search-btn {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #555d65;
    border-left: solid 1px rgba(0, 0, 0, 0.1);
    border-right: solid 1px rgba(0, 0, 0, 0.1);
}

.navigation-search-btn:hover {
    text-decoration: none;
    color: #555d65;
}

.navigation-search-btn i {
    font-size: 18px;
}

4 - Use the Javascript code below to open and close the search panel:

Copy

document.getElementsByClassName("search-panel-trigger")[0].addEventListener("click", function (e) {
    e.preventDefault();
    document.getElementsByClassName("navigation-search-panel")[0].classList.add("is-visible");
});

document.getElementsByClassName("navigation-search-panel-close-button")[0].addEventListener("click", function (e) {
    document.getElementsByClassName("navigation-search-panel")[0].classList.remove("is-visible");
});

The code attaches a "click" event handler to the element with the class "search-panel-trigger" to show the search panel. You can put this class on a link or button to achieve the same behavior.
The second block of code is used to close the search panel after a click on "✕"

The result:

See the list of tutorials for other ways to modify the navigation bar and add features.