Dawn Theme - how to make landing page header transparent with white menu over full bleed images

Store Design
, , ,
1

Screen Shot 2024-05-26 at 12.03.05 pm.png
Screen Shot 2024-05-26 at 12.03.05 pm.png2910×1274 497 KB

I am using the Dawn theme and would like to make the landing page header transparent (not white) and have full bleed images to the top of the page with white header drop down text and logo in white. Can anyone assist. This will be required on the landing page only.

2

Hey @0scar to make the header transparent with white menu items and logo over full bleed images

  1. Edit the CSS:

  • Go to your Shopify admin panel.

  • Navigate to Online Store > Themes.

  • Find the Dawn theme and click Actions > Edit Code.
    In the left-hand sidebar, under Assets, locate and click on base.css

    2 . Add Custom CSS:
    At the bottom of base.css, add the following custom CSS:

.template-index .header-wrapper {
  background: transparent;
}

.template-index .header__menu-item,
.template-index .header__logo {
  color: white;
}
.template-index .header__menu-item:hover,
.template-index .header__submenu-item {
  color: white;
}

.template-index .header--is-sticky {
  background: rgba(0, 0, 0, 0.5); 
}
​

3 . Make sure Full Bleed Images:

In the same base.css file, add the follo

.template-index .main-content {
  padding: 0;
  margin: 0;
}

.template-index .section {
  padding: 0;
  margin: 0;
}

.template-index .image-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Hope this helps

3

Hi @0scar
If you share your store URL and password with me, I will check and provide you with the solution.

4

Thanks @conversionist - I tried this and it didn’t work, my theme is in preview, as I still have a live site up with the old theme.

5

Sounds good, can you provide your email and I’ll set up the access and share it with you