TABLE OF CONTENTS

• Sample HTML to change the header colors

There are three breakpoints headers in the out-of-box theme

If you want to adjust the colors in your header, you can use dynamic styles to change all three formats.

Sample HTML to change the header colors

The HTML below will make the following adjustments to the header colors:

• Background color to white (#ffffff)
• Cart button  background to red (#e81C2d)
• Cart button text to white (#ffffff)

/* Change header background to White and medium blue icons*/

header .header {background-color: #ffffff;}

header .header .cart-btn-block {background-color: #ffffff;}

.site-search .search-widget  {background-color: #ffffff;}

.site-search z-widget { background: #ffffff;}

.site-search .search-widget .b2b-search-btn {color: #e81C2d;}

.cartcount-mobile {background-color: #e81C2d !important;}

/* Change the colors for the mobile icons */

@media all and (max-width: 991px) {

.hamburger-icon { background-color: #ffffff; color: #e81C2d !important;}

.search-icon { background-color: #ffffff; color: #e81C2d !important;}

.profile-icon { background-color: #ffffff; color: #e81C2d !important;}

.cart-icon { background-color: #ffffff; color: #e81C2d !important;}

.header-btn .nav-header { background-color: #ffffff;}

.navigation .mobile-nav-btn { background-color: #ffffff;}

header .header .header-nav-links .header-btn { background-color: #ffffff;}

}