header.php | Change position of search

Question

How can i make the search come in between storefront_primary_navigation and storefront_header_cart on the 2nd line of header ?? using the below PHP code. if i make these changes in CSS, it looks ugly on the mobile devices. So can this be done in PHP ? If Yes, in which file should i make the changes and what are the changes ?

Right now i have two lines in header:
First Line: Logo | secondary_navigation | product_search
Second Line: primary_navigation | header_cart

Now the header looks like:

PHP:

<header id="masthead" class="site-header" role="banner" <?php if ( get_header_image() != '' ) { echo 'style="background-image: url(' . esc_url( get_header_image() ) . ');"'; } ?>>
        <div class="col-full">

            <?php
            /**
             * @hooked storefront_skip_links - 0
             * @hooked storefront_social_icons - 5
             * @hooked storefront_site_branding - 10
             * @hooked storefront_secondary_navigation - 15
             * @hooked storefront_product_search - 20
             * @hooked storefront_primary_navigation - 25
             * @hooked storefront_header_cart - 30
             */
            do_action( 'storefront_header' ); ?>

        </div>

Output needed: First Line: Logo | secondary_navigation
Second Line: primary_navigation | product_search | header_cart

Manoj Changes:

Answer 1

This is similar to question/answer here: Sample product, Change location of price and glad you commented on the answer there ;)

PHP Edit:

In the below code, you are overwriting the Storefront hook inclusion/priority order. So the storefront_product_search will be included after storefront_primary_navigation which has a priority value of 25.

Include the following code in functions.php.

remove_action( 'storefront_header', 'storefront_product_search', 20 );

add_action( 'storefront_header', 'storefront_product_search', 26 );

CSS Edit:

.woocommerce-active .site-header .main-navigation {
  width: 58.913%; /* Changed to occupy the Search in same line */
}

.site-search:nth-of-type(1) {
   display: none; 
}

The second CSS rule is a hack to remove the first occurrence of the Search bar, it is not a standard solution. Since I don't have access to your PHP code, it is hard to predict the cause of the two search bar problem. There might be other actions interfering with the hook and undoing the remove_action PHP code or the priority was changed elsewhere.

Output:

Answer 2

You need to find the action called 'storefront_header'. Search through your theme files for it. If you are using sublime text 2 and have the theme directory open you can use ctrl-shift-f to search through all files at once.