Add Search Icon to Navigation Menu for Genesis Theme

Do you want to have a search option in your navigation menu, but like the style of just having the search icon there instead of the full box? This is how it will look:

Then when you click on it, the full search box will show up.

Add this code to your functions.php file.

Then you will need to add this to your style.css file. Note, I have customized this css for the Outreach Pro theme. Your theme might differ slightly.

/*
Menu Search 
---------------------------------------------------------------------------------------------------- */
.menu-item.search {
    margin-left: 30px;
}

.nav-primary .genesis-nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.search .search-form {
    text-align: center;
}

.search .search-form input[type="search"] {
    position: relative;
    width: 1px;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    cursor: pointer;
    -webkit-transition: width 500ms ease, background 400ms ease;
    transition: width 500ms ease, background 400ms ease;
	margin-left: -10px;
}

.search .search-form input[type="search"]:focus {
    width: 250px;
    outline: 0;
    background-color: #fff;
    cursor: text;
}

.genesis-nav-menu .search input[type="submit"] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.search .search-form:before {
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	font-family: "dashicons";
	font-size: 20px;
	content: "\f179";
}

.home .search .search-form:before {
    color: #333;
}

.site-container.white .search .search-form:before {
    color: #999;
}

@media only screen and (max-width: 862px) {
    .nav-primary .genesis-nav-menu {
        display: block;
    }
}

@media only screen and (max-width: 800px) {
    .menu-item.search {
        margin-bottom: 10px;
        margin-left: 20px;
    }

    .search .search-form:before {
        color: #999;
        -webkit-transform: none;
        transform: none;
    }

    .search .search-form {
        text-align: left;
    }

    .search .search-form input[type="search"] {
        padding-right: 0;
        padding-left: 0;
    }
}

As always, be sure to backup your site before making any changes to your functions.php file and make sure you have ftp or cpanel access to your files, just in case you make a mistake and it takes your site down.

Please note that I got a good start on this technique from Sridhar Katakam.  He used it on the Infinity Pro theme.

I hope this helps!