Change header to transparent in dawn theme

Store Design
,
1

Hi, can anyone help me on how to change header color to transparent for Dawn Theme.
Thankyou in advance!

2

@veluxe1 can you please share your website link?

3

https://socialbrainworld.myshopify.com

pass : socialbrain

I already made one, but looking for a better option if you got it

4

you actually have used simple yet very effective css

5

Actually, the menu drawer is the one that annoy me, it’s not fully height and distract me tbf

6

@veluxe1 it can be made like this, will need multiple css settings

image
image1366Ă—768 86.7 KB

7

What’s code i need to add?

8

Hi @veluxe1

The header is transparent now. Could you please explain what additional changes you’d like? Let me know exactly how you want it to look, and I’ll provide you with the proper solution.

image
image1341Ă—363 164 KB

Best regards,
Devcoder :laptop:

9

@veluxe1 please add this css and check

@media screen and (max-width:749px){
.header__icon--menu {
    position: initial !important;
    z-index: 1000000;
}

.menu-drawer__navigation {
    padding: 8rem 0 !important;
}

.header__icon--menu[aria-expanded=true]:before{display:none;}

}
10

The code didnt work and nothing changed

11

@veluxe1 in Dawn the header background comes from the color scheme set on the Header section, so a plain .header { background: transparent } wont stick, thats why the earlier code didnt do anything. target the wrapper instead. drop this at the bottom of Edit code > assets/base.css:

.header-wrapper {
  background: transparent !important;
  border-bottom: 0;
}

if you actually want it see-through sitting on top of your homepage image banner (not just matching the page bg), thats a bit more involved, you have to position the header over the banner and switch the menu/logo to white so its still readable.

12

From what I noticed, the transparent header isn’t the main issue. The homepage needs more work before you focus on design details.

Right now, it relies heavily on images but doesn’t clearly communicate what you sell, what makes your brand different, or why visitors should buy from you. That can significantly reduce your conversion rate.

I also noticed there are no featured products, trust building elements, or clear sections that guide visitors through the shopping journey. Your store structure could also benefit from better product categorization and navigation to make it easier for customers to browse.

My recommendation is to focus on building a complete, conversion focused homepage first. Once the foundation is in place, you can refine design elements like the transparent header.

With a few improvements to your homepage layout and user experience, you’ll be in a much stronger position before driving more traffic to the store.

13

@veluxe1 can you please add me as a collaborator? I can add css and do the necessary changes

14

We can achieve the transparent header by adding the following custom CSS to the base.css file.

sticky-header.header-wrapper
{
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}

Steps:

  • Go to Online Store-- Themes.
  • Click Edit code on the active theme.
  • Open Assets – base.css
  • Scroll to the bottom of the file.
  • Paste the above CSS and save the base.css file.

Steps:

  • Go to Online Store-- Themes.
  • Click Edit code on the active theme.
  • Open Assets – base.css
  • Scroll to the bottom of the file.
  • Paste the above CSS and save the base.css file.
15

Hi veluxe1,

I checked your website, and normally you can make the header transparent using the code below.

sticky-header.header-wrapper.color-scheme-4.gradient {
background: transparent !important;
}

However, considering your website’s black-and-white design, I don’t think a transparent header would be the best choice. When users scroll, the sticky header overlaps with the content underneath, which may affect readability and the overall user experience.

I would recommend keeping the header with a solid background, as it provides better visibility and a cleaner look while scrolling.

16

Hey @veluxe1 .
In Customize Online Store, go to Themes, click the header section, and check the settings panel for a transparent header option. Newer Dawn versions have this built in.
If it is not there, it would need custom CSS to make the header background transparent. There is no built in setting for that in older versions.

17

Hey @veluxe1

I hope you’re having a great day!

The Dawn theme doesn’t include a built in transparent header option. If you share your Dawn version or your store URL, The community can provide the appropriate CSS or code solution.