Re: Transparent header on mobile using Debutify theme

Transparent header on mobile using Debutify theme

uTech
Excursionist
20 0 5

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 

Replies 18 (18)

suyash1
Shopify Partner
9973 1240 1577

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

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/

suyash1
Shopify Partner
9973 1240 1577

@uTech- please remove this code part from above code

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

 

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

I did it and its back to being solid

suyash1
Shopify Partner
9973 1240 1577

@uTechit is scrolling -

 

suyash1_0-1633929800219.png

 

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

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.

suyash1
Shopify Partner
9973 1240 1577

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

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

uTech
Excursionist
20 0 5

Do you know a solution to this?

 

suyash1
Shopify Partner
9973 1240 1577
can you please give password? i will check again
Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

Try now as I disabled my Password

suyash1
Shopify Partner
9973 1240 1577

@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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

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.

suyash1
Shopify Partner
9973 1240 1577

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

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

suyash1
Shopify Partner
9973 1240 1577

@uTech- please add at bottom

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.
uTech
Excursionist
20 0 5

 

@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 

uTech
Excursionist
20 0 5

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