Transparent logo header on Mobile - debutify theme

DryP
Tourist
7 0 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.

0 Likes
suyash1
Shopify Partner
2981 320 499

@DryP - can you please share your website link?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
dmwwebartisan
Shopify Partner
7292 1721 2292

@DryP 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
BozidarS
Excursionist
23 3 6

It looks same to me on home and product page. Maybe try cleaning your browsers cache (or see how it looks in incognito mode). 

Little advice: increase announcement-container height on screens that have width smaller than 380px or reduce font size. Here's why: https://prnt.sc/wajli2

Custom solutions designed specifically for you: Elevatebits
0 Likes
DryP
Tourist
7 0 1

I've changed the site again so the issue is back.

 

Basically my mobile home page is the only page that displays everything correct, the others the top header and logo are blended with eachother

0 Likes
BozidarS
Excursionist
23 3 6

This is what I see now: https://prnt.sc/wak1hs

CSS can be frustrating sometimes. Check your media query definitions, maybe there's a typo and that's why you can't get your code applied... It could be just definition of min-width instead of max-width (it happened to me once upon a time )

Custom solutions designed specifically for you: Elevatebits
0 Likes
DryP
Tourist
7 0 1

Here's the exact code i put in, i adjusted margin-bottom to get rid of the white bar/border between the logo header and annoucement bar but to be honest im super new to this so not sure what else to adjust to fix the header on the other pages

 

@media screen and (max-width: 800px) {
  #shopify-section-header {
    position: absolute;
    z-index: 100000;
    width: 100%;
  }
  header.site-header {
    background-color: transparent!important;
  }
}
.template-index #shopify-section-header{
margin-bottom: -60px;
position: relative;
z-index: 9;
}
.template-index #shopify-section-header header{
background-color: transparent;
}

 

0 Likes
BozidarS
Excursionist
23 3 6

Ok, got it. Check these two images:
https://prnt.sc/wak9l4
https://prnt.sc/waka6g

 

Browser interprets CSS from top to bottom so, if you define same attribute for an element twice, it will interpret second one. That is why all media queries are placed in file from top to bottom, from largest to smallest defined screen size. 

When you reorder these two it will solve also issue with font/icons color.

Custom solutions designed specifically for you: Elevatebits
0 Likes
DryP
Tourist
7 0 1
Oh cool thanks for the help.
I’m super new to this so how exactly would I go about swapping these around in the theme css file?
0 Likes