Change the Color of the Transparent Header on Mobile Devices

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

If you are using the Transparent Header Style (Appearance > Customize > Header > General) and you wish to add or change the color of the header for mobile devices, use the following CSS snippet:

/* Transparent Header Color on Mobile Devices */
@media only screen and (max-width: 959px) {
	div#site-header-inner {
		background-color: #fff;

Adjust the max-width and background-color values per your need.

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Useful Links:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.