WP SITES

2654

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Toggle Search Bar Over Site Header Menu In Genesis Child Themes

The code in this download folder enables you to add the search bar from the Monochrome Pro child theme to any other Genesis child theme.

However, this code works with a fixed header so if your child theme doesn’t include a fixed header, you can make it fixed first.

Here’s the search bar added to the Revolution Pro child theme by StudioPress :

Genesis search bar overlay menu in header

Demo Video #

Shows the search bar displaying over the site header and nav menu when toggled.

Tested using the Revolution Pro child theme by StudioPress however will work in any Genesis child theme. Some themes may require CSS modification.

Installation Steps

There’s 3 steps :

# Step 1 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

# Step 2 : Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

# Step 3 : Upload the file named search.js to your child themes js folder.

You can then check the box in Customize > Header Search Settings > Show Menu Search Icon?

Download Folder

Align Site Title

Use CSS like this to align your site title

.title-area {
    margin-top: 12px;
}

Reader Interactions

Comments

        • Is the code installed? Looks like a issue of where you hook in the search icon. In this case, if you’re using Parallax Pro and the header widget for the menu, you need to modify the PHP code which hooks in the icon. See the PHP for the genesis_add_search_menu_item function in functions.php and you’ll find some conditionals like 'primary' and secondary which won’t work with the header right widget for your menu so you can remove them from the function.

          function genesis_add_search_menu_item( $items, $args ) {

	$search_toggle = sprintf( '<li class="menu-item">%s</li>', genesis_get_header_search_toggle() );

	$items .= $search_toggle;

	return $items;

}

          Note for all members : I appreciate the questions and happy to point you in the right direction, however, if i do the work and publish a new tutorial for this and you download it, you’re require to pay the additional tutorial request fee. If you do the work, you’re not.

          This will get you started with the CSS

          .shadow .site-header,
.site-header.search-visible, 
.header-search-wrap input[type="search"] {
    background-color: white;
}

          • Sorry for the delay. Didn’t get a notification on the second reply. That did the trick. Appreciate you as always, sir!

Leave a Reply