WP SITES

Log in

Toggle Search Bar Over Site Header Menu In Genesis Child Themes

—

by

Brad Dalton

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

Comments

11 responses to “Toggle Search Bar Over Site Header Menu In Genesis Child Themes”

  1. defree99 Avatar
    defree99

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Using the Genesis Sample child theme?

      You want this to happen on mobile or desktop?

      1. defree99 Avatar
        defree99

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

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. Brad Dalton Avatar
            Brad Dalton

            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.

          2. defree99 Avatar
            defree99

            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 Avatar
    James Hahn II

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

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. James Hahn II Avatar
        James Hahn II

        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/

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          [code]
          function genesis_add_search_menu_item( $items, $args ) {

          $search_toggle = sprintf( ‘

        2. %s

          3. ‘, genesis_get_header_search_toggle() );

          $items .= $search_toggle;

          return $items;

          }
          [/code]

          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

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

  1. James Hahn II Avatar
    James Hahn II

    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

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.