I added icons to my header that have text slide in on hover (icons 2 – 5 on the upper right side).
Now I would like to use the search toggle widget (first icon) with just the icon and the input box sliding in. To match the existing style I would love to get one of the following two options to work.
Either
a) having the text “Suche” slide in on hover (as it is the case with the other icons) or
b) trigger the toggle effect (sliding in input box) when hovering over the search icon (and let it close itself on mouseOut).
I tried to achieve this on different ways, but had to realize I still have a long way to go regarding my coding skills. That’s also the reason I don’t want to give up at this point just yet.
Could anyone be as so kind as to point me in the right direction to get one of the results I’m looking for? Every help is highly appreciated!
Thanks in advance and best regards,
-Bj?rn
add_filter( 'genesis_header', 'genesis_header_icon', 10, 2 );
function genesis_header_icon(){ ?>
<div class="custom-search head-custom-search">
<?php echo sprintf( '%s', __( genesis_search_form( $echo ) ) ); ?>
</div>
<div class="header-icons">
<span class="search-box">
<a href="void(0)">
<i class="dashicons dashicons-search"></i>
</a>
</span>
</div>
<?php }
JS Code used:
// Header Search Toggle
//---------------------------------------------------------------
jQuery(document).ready(function(){
jQuery(".header-icons .search-box .search-icon").click(function(){
jQuery(".site-header .wrap .head-custom-search").slideToggle();
//alert('thtyh');
jQuery(".header-icons .search-box .search-icon i").toggleClass("dashicons-search dashicons-no-alt");
});
jQuery(document).mouseup(function(e) {
var container = jQuery(".site-header .wrap .head-custom-search");
var search_icon = jQuery(".header-icons .search-box .search-icon");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
if (!search_icon.is(e.target) && search_icon.has(e.target).length === 0) {
jQuery('.site-header .wrap .head-custom-search').slideUp();
jQuery('.header-icons .search-box .search-icon i').removeClass("dashicons-no-alt");
jQuery('.header-icons .search-box .search-icon i').addClass("dashicons-search");
}
}
});
});
css code used:
/* Add your CSS code here.
For example:
.example {
color: red;
}
For brushing up on your CSS knowledge, check out https://www.w3schools.com/css/css_syntax.asp
End of comment */
header .header-icons{
width: 35px;
float: right;
text-align: right;
padding: 30px 0px 0px;
position:relative;
}
header .header-icons .search-box{
position:relative;
}
header .header-icons a{
margin-left:10px;
text-decoration:none;
}
header .header-icons .search-box i{
color:#ba0c2f;
}
header .header-icons .twitter-icon i{
color::#ba0c2f;
}
header .header-icons .fb-icon i{
color::#ba0c2f;
display: none;
}
.genesis-nav-menu i{
vertical-align:middle;
}
.genesis-nav-menu .custom-search-icon i{
vertical-align:middle;
padding: 0px 5px 0px 10px;
cursor:pointer;
}
.genesis-nav-menu li a.icon{
padding: 5px 5px;
}
.site-header .wrap{
position:relative;
}
.site-header .wrap .head-custom-search{
position:absolute;
top: 78px;
right: 20px;
width: 300px;
text-align: center;
background:#fff;
display:none;
z-index: 9999;
}
.site-header .wrap .head-custom-search .search-form {
margin-bottom: 0px;
width: 100%;
padding: 20px 18px;
}
.site-header .wrap .head-custom-search .search-form input[type='search']{
width: 562px;
height:40px;
}
.site-header .wrap .head-custom-search .search-form input[type="submit"] {
margin-top: 0px !important;
padding: 20px 26px 18px;
border-left: 0px;
background:#ba0c2f;
color:#fff;
}
.site-header .wrap .head-custom-search .search-form input:focus[type="submit"],
.site-header .wrap .head-custom-search .search-form input:hover[type="submit"]{
transform: translate3d(0,0,0);
}code added to enqueue scrips and styles:
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);
I’ve added the following php to my function.php file:
add_theme_support( 'html5', array( 'search-form' ) );
add_filter('wp_nav_menu_items', 'add_search_form_to_menu', 10, 2);
function add_search_form_to_menu($items, $args) {
// If this isn't the main navbar menu, do nothing
if( !($args->theme_location == 'main') ) // with Customizr Pro 1.2+ and Cusomizr 3.4+ you can chose to display the saerch box to the secondary menu, just replacing 'main' with 'secondary'
return $items;
// On main menu: put styling around search and append it to the menu items
return $items . '<li class="my-nav-menu-search">' . get_search_form(false) . '</li>';
}And I’ve also added the CSS that was offering in a tutorial.
According to the tutorial I’m using, *This adds a search form to your WordPress main menu. Once you’ve added this code, you can refresh your page and you’ll see a search form.* (Tutorial here, there are many I’ve looked through, this is just the one in particular that hasn’t given me php errors). No search shows up, but I’m not getting any errors in the console that appear to relate to the custom function.
Any help would be much appreciated. I know enough php to get by but I’m afraid past basic Googling, I don’t know enough to troubleshoot something like this.
]]>Here’s what I copied to the child theme:
( function( $ ) {
// Search toggle.
$( '.search-toggle' ).on( 'click.child-theme', function( event ) {
var that = $( this ),
wrapper = $( '#search-container' ),
container = that.find( 'a' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
if ( that.hasClass( 'active' ) ) {
container.attr( 'aria-expanded', 'true' );
} else {
container.attr( 'aria-expanded', 'false' );
}
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
} )( jQuery );