WooCommerce Storefront Header: Hamburger icon on left, search bar on right

user_15101959 0
Viewed 266

So I wanted ta have a hamburger image to the left of the search bar in the header.

Removed main menu:

add_action('init', 'remove_storefront_header_stuff' );
function remove_storefront_header_stuff(){
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
}

Then added it with the same priority as product search:

add_action('init', 'add_storefront_header_stuff' );
function add_storefront_header_stuff(){
   add_action( 'storefront_header', 'storefront_primary_navigation', 40 );
}

And then some css:

.homeicon {
    background-image: url('/wp-content/uploads/2021/03/pfn_hamburger35x35.png');
    background-repeat: no-repeat;
    background-position: left;
}

.main-navigation {  
    width: 5%;
    float: left !important;
    margin:0;
}

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    color:#EDC965;
    opacity: 0;           /*(This was done just to hide the menu text)*/
    padding:1px;
}

.woocommerce-active .site-header .site-search {
    float: right !important;
    width: 90%;
    margin-bottom: 0 !important;
}

The result of this is the hamburger left and search right. As supposed. But the hamburger is below the search and not aligned on the same height. Funny thing is when looking at the mobile now it look pretty perfect with the mobile menu perfectly aligned. But on desktop not so......

What can I do?

storefront woocommerce wordpress css
1 Answers

Problem solved. I went for a plugin. BUT. I realized that the order of the lines means something:

    function add_storefront_header_stuff(){
    add_action( 'storefront_header', 'storefront_product_search', 20 );
    add_action( 'storefront_header', 'storefront_secondary_navigation', 20 ); 
}

With the same priority, the search is to the left of secondary navigation. If put navigation first it would show left of search.

user_151019590
Related