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*/
Leave a Reply