Transparent header on mobile using Debutify theme

Store Design
1

I’m trying to get the header transparent on mobile,

So I found threads on code to copy and paste into the theme CSS file,

however after toying around with it I got it perfect for the HOME page (removing the white bar etc) but once on the product page the logo is all messed up and mixed ontop of the announcement bar,

Unsure how to fix this.

Screenshot of Homepage where its normal transparent and turns white when scrolling: https://prnt.sc/1vnm62q

Screenshot of Product Page where its all messed up: https://prnt.sc/1vnmbuz

2

@uTech - can you please share this page link? I think header is not properly overlapping the other content , we need to set that

3

When going into mobile it only works on Homepage but go to a product and it gets messy

This is the exact code I put at the bottom of my theme.scss.liquid folder

@media only screen and (max-width: 769px){
.header-section .header-container {
position: absolute !important;
}
.site-header {
background-color: transparent !important;}
.is-scrolling .site-header {
background: #FDF6EF !important;
}
}

https://www.shoputech.com/

4

@uTech - please remove this code part from above code

.header-section .header-container {
position: absolute !important;
}
5

I did it and its back to being solid

6

@uTech it is scrolling -

suyash1_0-1633929800219.png
suyash1_0-1633929800219.png1366×768 99.5 KB

7

I wanted it to be transparent when its all the way at the top because in Home page I didn’t like the way I have a slideshow but then theres a chunky white bar on top. But the problem was when I went to a product page it became messy. I want to be able to have a transparent header and it turning into a solid colour when scrolling while also working properly in product page.

8

@uTech - so do you want bar to be transparent on home page but not on other product pages to mess it up?

9

Basically, but it would be better if I could make it also transparent in product page.

10

Do you know a solution to this?

11

can you please give password? i will check again

12

Try now as I disabled my Password

13

@uTech - please remove this part

.header-section .header-container {
position: absolute !important;
}

and add this css to check on product page

.is-scrolling .site-header {
    background: rgba(255,255,255,0.7) !important;
}

the issue with your pages is all including home page sahre the very same css classes and hence any property applied will be reflected on ALL pages

14

Where do I put the second code? If it’s okay with you can you put all the code together so I will just copy and paste it.

15

@uTech - put second code only, first is to be removed, you had added first one

16

Okay where do I put the second code at the bottom of the old one or at the top of them?

17

@uTech - please add at bottom

18 
@media only screen and (max-width: 769px){
.site-header {
    background-color: transparent !important;}
.is-scrolling .site-header {
    background: #FDF6EF !important;
}
.is-scrolling .site-header {
    background: rgba(255,255,255,0.7) !important;
}
}

this is what I have so far and something went wrong. It is solid when in top position but is slightly transparent when scrolling

19

Sorry for bothering you but what do I do now. Instead of being solid when scrolling it’s slightly transparent