How to Add Responsive Search Form in Genesis Menu?

Are you a fan of Genesis Framework? then i am sure you might be dealing with the most frustrating part, that is to add responsive search form. In this guide i will tell you how to add responsive search form in Genesis menu. The code is available on github too.

The process involves 4 steps that are shown below.

Step 1 – Enqueue Dashicons

Since we will use dashicon’s lens as our search icon, the first step is to enqueue dashicon. Let’s do that by adding the given below code to your Genesis child theme’s functions.php

/**
 * Enqueue Dashicons for front-end use
 */
function my_theme_enqueue_dashicons() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_dashicons');

Step 2 – Adding php code and html

After enqueuing dashicons, let’s add the php function and some html code to functions.php that will bring our search icon to life.

// Add search icon to primary navigation menu - Optimized with vanilla JS
function nexgen_add_search_icon_to_menu($items, $args) {
    // Only add to primary/header menu
    if ($args->theme_location == 'primary' || $args->theme_location == 'header-menu') {
        $search_form = '<li class="menu-item search-icon-item">';
        $search_form .= '<a href="#" class="search-icon-toggle"><span class="dashicons dashicons-search" aria-hidden="true"></span><span class="screen-reader-text">Search</span></a>';
        $search_form .= '<div class="search-form-container">';
        
        // Custom search form with icon button
        $search_form .= '<form role="search" method="get" class="custom-search-form" action="' . esc_url(home_url('/')) . '">';
        $search_form .= '<div class="search-form-wrapper">';
        $search_form .= '<input type="search" class="search-form-input" placeholder="Search here" value="' . esc_attr(get_search_query()) . '" name="s" />';
        $search_form .= '<button type="submit" class="search-form-submit" aria-label="Search"><span class="dashicons dashicons-search"></span></button>';
        $search_form .= '</div>';
        $search_form .= '</form>';
        
        $search_form .= '</div>';
        $search_form .= '</li>';
        
        $items .= $search_form;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'nexgen_add_search_icon_to_menu', 10, 2);

// Add JavaScript for toggle functionality - Optimized to use vanilla JS and avoid jQuery
function nexgen_add_search_icon_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get all search icon toggles
        const toggles = document.querySelectorAll('.search-icon-toggle');
        
        // Add click event to each toggle
        toggles.forEach(function(toggle) {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                const container = this.nextElementSibling;
                
                // Toggle the display
                if (container.style.display === 'block') {
                    container.style.display = 'none';
                } else {
                    container.style.display = 'block';
                    container.querySelector('.search-form-input').focus();
                }
            });
        });
        
        // Close search when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.search-icon-item')) {
                document.querySelectorAll('.search-form-container').forEach(function(container) {
                    container.style.display = 'none';
                });
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'nexgen_add_search_icon_script');

Step 3 – Adding some javascript

Let’s add some javascript to /js/global-min.js

(function(){
  // Remove no-js class
  document.body.classList.remove('no-js');
  document.body.classList.add('js');
  
  // Any other global functionality can be added here
})();

Step 4 – Adding CSS to style.css file

The last and final step is to add some CSS to your child theme’s style.css file.

/* Search icon styling */
.search-icon-item {
    position: relative;
}

.search-icon-toggle {
    cursor: pointer;
}

.search-form-container {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	border-radius:5px;
    z-index: 999;
}

/* Custom search form styling */
.search-form-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.search-form-input {
    flex-grow: 1;
    padding: 8px 10px;
    outline: none;
    width: calc(100% - 40px); /* Adjust to account for button width */
}

.search-form-submit {
    width: 40px;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
	color:#263238;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-form-submit:hover {
    background: #263238;
    color:#fff;
}

/* Make sure search works on mobile */
@media (max-width: 768px) {
    .search-form-container {
width: 100%;
position: relative;
box-shadow: none;
padding: 0;
    }
}

/* Screen reader text for accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
}

That’s all.