Change Color of Header Row of Transparent Background

[hiatushut]

I’d like to change the color of the header row & column section (highlighted) for my entire site, but specifically my home page. I am currently working off the latest version of the Dwell theme that’s already had some of it’s original code edited.

As it is now, the transparent background makes the font illegible against the hero image. I’d like to change the color to:

HEX #f5f5f5 / RGB (245, 245, 245)

After inspecting the element on my site, I believe these are the most likely selectors for the header row portion of the header that I’d like to target/change:

#header-component > div.header__row.header__row–bottom.color-scheme-1.section.section–full-width-margin.section–full-width.mobile:hidden

#header-component > div.header__row.header__row–bottom.color-scheme-1.section.section–full-width-margin.section–full-width.mobile:hidden > div

#header-component > div.header__row.header__row–bottom.color-scheme-1.section.section–full-width-margin.section–full-width.mobile:hidden

Thanks in advance, all help is appreciated! Let me know if it would be helpful to upload any of my header.liquid files!

Here’s the link to my store. PW is veebra:

Hiatus Hut Furnishings

[hiatushut]

I’d like the rest of the header to remain transparent!

[devcoders]

Hi @hiatushut

Add this to base.css / theme.css (bottom of file):

.template-index .header-wrapper,
.template-index .site-header,
.template-index .header-row {
  background-color: #f5f5f5;
}

.template-index .header--scrolled,
.template-index .sticky-header {
  background-color: #f5f5f5;
}

[tim_tairli]

I’d use one of these (Can go into “Custom CSS” of the Header section)
And since the color matches the main background color, no need for special code for homepage vs others.

.header__row--bottom .header__columns {
  padding-bottom: 0;
}
.header__row--bottom {
  background: var(--color-background);
}

Or semi-transparent one:

.header__row--bottom .header__columns {
  padding-bottom: 0;
}
.header__row--bottom {
 background: rgba( var(--color-background-rgb) / 0.7);
}

Or even use a gradient:

.header__row--bottom .header__columns {
  padding-bottom: 0;
}
.header__row--bottom .header__columns {
  --bb: rgba(var(--color-background-rgb) / 0.6);
  background: linear-gradient(
      90deg,
      transparent var(--page-margin),
      var(--bb) calc( var(--page-margin) * 3 ),
      var(--bb) calc( 100% - var(--page-margin) * 3 ),
      transparent calc( 100% - var(--page-margin) )
    );
}

More complex solutions are also possible…

[hiatushut]

WOW! Thank you so much! The gradient looks beautiful!