Dynamic Styles - Changing Header Colors

TABLE OF CONTENTS

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;}

}

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.