Skip to content

Instantly share code, notes, and snippets.

@billerickson
Created March 8, 2017 19:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save billerickson/15c2d38053727ff12f321fbc1f840ca6 to your computer and use it in GitHub Desktop.
Save billerickson/15c2d38053727ff12f321fbc1f840ca6 to your computer and use it in GitHub Desktop.
<?php
/**
* Primary Menu Extras
*
*/
function ea_primary_menu_extras( $menu, $args ) {
if( 'primary' == $args->theme_location )
$menu .= '<li class="menu-item search"><a href="#" class="search-toggle"><i class="icon-search"></i></a>' . get_search_form( false ) . '</li>';
return $menu;
}
add_filter( 'wp_nav_menu_items', 'ea_primary_menu_extras', 10, 2 );
jQuery(function($){
// Search toggle
$('.nav-primary .search-toggle').click(function(e){
e.preventDefault();
$(this).parent().toggleClass('active').find('input[type="search"]').focus();
});
$('.search-submit').click(function(e){
if( $(this).parent().find('.search-field').val() == '' ) {
e.preventDefault();
$(this).parent().parent().removeClass('active');
}
});
});
.nav-menu {
.search-form {
display: none;
position: absolute;
top: 16px;
right: 0;
width: 100%;
input[type="search"] {
background: $white;
border: 1px solid $grey-4;
font-size: 16px;
line-height: 1.2;
padding: 6px 20px 6px 8px;
}
@include placeholder-color( $grey-4 );
.search-submit {
border: none;
color: $highlight;
padding: 8px;
position: absolute;
top: 0;
right: 0;
&:hover {
background: transparent;
color: $green-2;
outline: none;
}
}
}
&.active .search-form {
display: block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment