How to make transparent header background fade to black background

Store Design
,
1

How do I make my header in Dawn look like the header for fearofgod.com, except I want to keep all the text and icons on the header white, and make the background black instead of white.

2

Hi @nc1524

Please share your store URL

3

Hello @nc1524 ,

A general guide will look like this:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css or theme.scss.liquid file

Add this following code at the bottom of page

.site-header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.site-header a, .site-header i {
  color: white;
}

Save and preview

Hope this can help.

Transcy

4

Hey @nc1524

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed