Transparent header + hero image

Store Design
1

Hi. I have this header, but I’d like to adapt it so that the image I already have becomes a hero image, and I want to make the header transparent so it blends seamlessly with it — when you hover over it, the header should become opaque again so the existing menu is visible. Can anyone help me?

url: www.voodoo-warehouse.com

1 Like
2

Respect your time and the time of others and stay within the guidelines by SEARCHING first and showing your work.
Always provide relevant details like theme name.

e.g. https://community.shopify.com/search?q=dawn+transparent+header
hover menu etc etc

3

Hello, @voodoowww123

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.template-index #shopify-section-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}

.template-index #shopify-section-header:hover {
  background-color: #000000 !important;
}

.template-index #shopify-section-header .header__heading-link,
.template-index #shopify-section-header .header__menu-item,
.template-index #shopify-section-header .header__icon {
  color: #ffffff !important;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.template-index #shopify-section-header:hover .header__menu-item,
.template-index #shopify-section-header:hover .header__icon {
  color: #ffffff !important;
}

.template-index #MainContent .shopify-section:first-child {
  margin-top: 0;
}

Save it and Try,

Thank You!

5

Hi,

You can make the header sit over your hero image and turn transparent with a small CSS change. Right now the header has a solid background, which is why it doesn’t blend into the image.

Here’s a basic version you can try:

.site-header {
  background: transparent;
  position: absolute;
  width: 100%;
  z-index: 50;
  transition: background 0.3s ease;
}

.site-header:hover {
  background: rgba(255, 255, 255, 0.9); 
}

This makes the header transparent on load so it blends into the hero image, and when you hover over it the background comes back so the menu is easy to read.

If you’re using a specific theme (Dawn, Prestige, etc.), let me know — sometimes the class names are a bit different and I can point you to the exact one.

6

Hey thank you for your response. The theme I am using is the Dawn theme. I tried this code but I don’t see any changes on the header

1 Like
7

Hey, thank you! I also tried this code on my Dawn theme, but nothing happened. The header I’m using is an external add-on from Section Store, so maybe that’s why—it’s not the default Shopify header.

1 Like
8

If you’d like, I can take a look at it for you.
Just send me the collaboration access code, and I’ll request access from my side.

9

A little help, anyone? Thanks!