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

Store Design
, , ,

Topic summary

Goal: make the Dawn (Shopify) landing page header transparent with white menu and logo over full-bleed images, limited to the homepage.

Proposed approach (CSS edits in base.css):

  • Target .template-index (homepage) to set a transparent header and white menu/logo text. Adjust sticky header to a semi-transparent background.
  • Remove default padding/margins on main-content/section and force image banners to span full viewport width (full bleed).

Technical notes:

  • “template-index” targets the homepage template. “Full bleed” means images extend edge-to-edge. “Sticky header” stays visible while scrolling.
  • CSS code snippets are central to the solution.

Current update:

  • The OP tried the provided CSS but reports it didn’t work; their Dawn theme is currently in preview while an old theme remains live.

Next steps:

  • Another participant requested store URL/password to investigate directly.
  • The OP asked for their email to grant access.

Status: unresolved and ongoing. Key question remains why the CSS changes aren’t taking effect in the preview theme; no confirmed fix yet.

Summarized with AI on December 28. AI used: gpt-5.
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.

1 Like
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