Can I make my header transparent? Dawn Theme

Store Design
1

Hi,

I would love to make my header transparent so any image/video covers this area. I have searched on here and copied some of the code for this theme but it still doesn’t seem to work. Please can any help?

www.generationaudio.co.uk

Thanks,

Scott

2 Likes
2

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
header.header.header--middle-left.page-width.header--has-menu {
background-color: transparent;
}
3

Hi @Gen-Audio ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.header-wrapper {
    background-color: transparent !important;
}
header.header.header--middle-left.page-width.header--has-menu {
    background-color: transparent;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

4

@Gen-Audio

sorry for that issue can you try

add this code theme.liquid before
5

Hi, thank you!

6

Sorry but none of the above do anything

7

@Gen-Audio

sorry bt i can’t see code

8

This just makes the header a dark grey colour

9

Can anyone help?

10

Hi,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

Go to Online Store->Theme->Edit code

Asset->/base.css->paste the below code at the bottom of the file:

.header-wrapper {
    background-color: transparent !important;
}
header.header.header--middle-left.page-width.header--has-menu {
    background-color: transparent;
}

If you have any concerns feel free to ask me!

Regards,
Ani

11

Hi Ani,

You have used the exact same code as @ZestardTech and it doesn’t seem to work

12

ah maybe i know need to move the video/image up to cover the transparent area now??

13

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
sticky-header.header-wrapper {
    background-color: transparent !important;
    position: absolute;
    width: 100%;
}
14

This is how it looks. Still doesn’t seem to work. This is my copy theme so i don’t mess my main one up

https://www.generationaudio.co.uk/?fts=0

15

Any ideas why the header isn’t transparent even after I have added the above code? Here is what it looks like after adding the code. It is usually black but goes to a dark grey

https://www.generationaudio.co.uk/?fts=0

1 Like
16

@Gen-Audio

you try code?

17

Hi,

Yes I tried all the codes that were suggested here. Maybe the video needs moving up? Or would the video be covering this area even after the code is applied? @KetanKumar

Thanks

18

@Gen-Audio

yes, please try and let me know if any issue bcz i have try same code other theme is work

19

It doesn’t work for some reason.

1 Like
20

@Gen-Audio

oh sorry for that still issue if possible to give me theme access so i will check and quick fix?