• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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;
}

Accordion & Toggle Nav Menu Revolution Pro Theme Search

Reader Interactions

Comments

  1. defree99 says

    July 12, 2020 at 9:50 pm

    I have a custom request for Genesis child theme.

    1. I would like to move the header menu down, to become a full width menu
    2. Then replace where the header menu previously was with a header-right widget
    3. The end result should look like this template: http://dallas-plumbing-company.com

    Log in to Reply
    • Brad Dalton says

      July 13, 2020 at 2:11 am

      Using the Genesis Sample child theme?

      You want this to happen on mobile or desktop?

      Log in to Reply
      • defree99 says

        July 13, 2020 at 2:22 am

        Yes, on Genesis Sample child theme.
        I would like this on Desktop.

        Log in to Reply
        • Brad Dalton says

          July 13, 2020 at 2:37 am

          Got it. Please acknowledge the additional tutorial request fee https://wpsites.net/terms-of-service/#additional-tutorial-requests

          Log in to Reply
          • Brad Dalton says

            July 13, 2020 at 3:08 am

            If you’re using a logo, please send it to brad@wpsites.net at the size you want it displayed. Also, if adding text for a phone number, please include the HTML for it in the email.

          • defree99 says

            July 13, 2020 at 3:24 am

            Here is the html. If it’s not perfect I’ll fix it after you finish. Feel free to edit anything as needed. I’m just trying to get this information into the header right widget *horizontally* Here is the logo: http://dallas-plumbing-company.com/image/logo.png

            24H EMERGENCY SERVICE 800-123-4567

            CALL OFFICE # 800-123-4567

            Schedule Service Now

  2. James Hahn II says

    July 11, 2020 at 12:49 am

    Hey Brad, having trouble adding this to Parallax Pro. Been stuck for a few days. Any recommendations?

    Log in to Reply
    • Brad Dalton says

      July 11, 2020 at 1:22 am

      Link to the live site please. It was tested in Revolution Pro however the CSS may need tweaking for use in other themes.

      Log in to Reply
      • James Hahn II says

        July 11, 2020 at 1:17 pm

        Sure thing. I’ve been trying to guess which `genesis_` to replace with `parallax_` and unsuccessful thus far. This is the staging site. http://oiltizer.wpengine.com/

        Log in to Reply
        • Brad Dalton says

          July 11, 2020 at 1:21 pm

          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;
          }
          Log in to Reply
          • James Hahn II says

            July 14, 2020 at 4:16 pm

            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 Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems