Woocommerce storefront theme Product Search Bar to page center-CodePudding

I have a WordPress e-commerce site

and this is the way I want (page center)

CodePudding user response：

Since this is WordPress and you are not able to change the HTML layout I've done the following CSS fix. I added display: flex to the wrapper of the 3 blocks inside the header. Then I added order attributes to the elements to order them to my liking, then I also added width and replaced margin with padding so it doesn't force any element to go on the next line.

/* Header Wrapper */
.site-header .col-full {
    display: flex;
}

/* Site Logo */
.site-header .site-branding {
    order: 1;
    width: 25%!important;
    margin-right: 0!important;
    padding-right: 10px;
}

/* Searchfield */ 
.site-header .site-search {
    order: 2;
    width: 50%!important;
    padding-right: 20px;
}


/* Navigation */
.site-header .secondary-navigation {
    order: 3;
    width: 25%!important;
    margin: 0!important;
}

Results