1) Add this snippet to functions.php
// =========================================================================
//CHANGE DEFAULT STOREFRONT HEADER LAYOUT
// =========================================================================
function remove_storefront_actions() {
remove_action( 'storefront_header', 'storefront_product_search', 40 );
remove_action( 'storefront_header', 'storefront_primary_navigation', 50);
remove_action( 'storefront_header', 'storefront_secondary_navigation', 30);
remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}
add_action( 'init', 'remove_storefront_actions' );
add_action( 'storefront_header', 'storefront_header_cart', 40 );
add_action( 'storefront_header', 'storefront_primary_navigation', 30);
2) CSS
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.woocommerce-active .site-header .site-branding {
width: 20% !important;
}
.woocommerce-active .site-header .site-header-cart {
width: 15%;
}
.site-header .col-full {
padding: 0 !important;
max-width: 100% !important;
margin: auto;
display: flex;
}
}/*END*/
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.site-header .col-full {
max-width: 90% !important;
}
}/*END*/
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.site-header .col-full {
max-width: 90% !important;
}
.woocommerce-active .site-header .main-navigation {
width: 70% !important;
}
}/*END*/
/* XXL Large devices*/
@media (min-width: 1400px) {
.site-header .col-full {
max-width: 80% !important;
}
.woocommerce-active .site-header .main-navigation {
width: 60% !important;
}
}/*END*/