I would like to center Product search on about the same line with Site logo and align right on the same line the secondary menu on site https://prettify.ru (I’m not advertising or something… I put a link just to be more concrete on the subject. Hopely it is not against rules).
The default hooks’ output for Storefront theme is like this
- Site Branding (logo e.t.c.)
- Secondary menu
- Product search
- Primary navigation menu
I was trying to play with CSS with that set up but it seems pretty hard for me (I’m a noob, ha ha) to center Product Search for all resolutions with that hooks order.
My Idea how to do habdle this is to change output priorities: show Product search right after Site Branding and then Show Secondary menu. Only after that play with CSS rules/styling.
What I’m see at storefront-template-hooks.php is
add_action( 'storefront_header', 'storefront_header_container', 0 ); add_action( 'storefront_header', 'storefront_skip_links', 5 ); add_action( 'storefront_header', 'storefront_site_branding', 20 ); add_action( 'storefront_header', 'storefront_secondary_navigation', 30 ); add_action( 'storefront_header', 'storefront_header_container_close', 41 ); add_action( 'storefront_header', 'storefront_primary_navigation_wrapper', 42 ); add_action( 'storefront_header', 'storefront_primary_navigation', 50 ); add_action( 'storefront_header', 'storefront_primary_navigation_wrapper_close', 68 );
No call for search function. My logic was like that: find output for product search and set priority higher than
storefront_secondary_navigation: let say 25. But I can not find where the search priority is set up. I’m using AJAX Search for WooCommerce plugin and that makes things to be a bit more complicated, he he.
Can someone please suggest how to reorder items in header?
Will it work for my target: center cearch and align secondary menu right?
Go to Source