Transparent Header on theme

Store Design
,
1

Hey All, I am having trouble setting up transparent header in my current theme. It works correctly on desktop but not on mobile can anyone help me out? I would like for it to be transparent and show on top of the hero image/banner and then change back to the regular header when people scroll. website is. cuzzoclothing.com

2

Hi @Mrstep

You can copy this code and paste it in your theme:

@media (max-width: 767px) {
    header.header.background-color {
        background: transparent;
        background-color: transparent;
    }
}

Try it out and let me know!

Cheers,
David

3

Hi @Mrstep

Let’s add this custom CSS code to the end of your file base.css:

@media (max-width: 1024px) {
    header.header.header-plain--transparent {
        background-color: transparent;
        position: absolute;
        width: 100%;
        z-index: 3;
    }
}

image
image575×727 97.9 KB

4

Hi @Mrstep

i understand what you want, but you will have to change all icons, logo to white when not scrolling.

Here is a simple css to transparent the header on mobile. you can put it in Theme customize > Theme settings > Custom CSS

@media only screen and (max-width: 767px){
	.section-header-navigation:not(.scrolled-past-header) header.header {
		position: absolute;
		background: transparent;
		width: 100%;
	}
}

Just updated the code. lets try

5

Hello! I checked out your issue and here’s what’s happening on desktop the transparent header works fine, but on mobile the theme applies different CSS that forces a solid background.

Here’s how you can fix it:

  1. In your theme CSS, look for the mobile media query (@media screen and (max-width: 749px)). Override it with:
@media screen and (max-width: 749px) {
  .site-header {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
}
  1. To make the header switch back to your regular color once users scroll, add this JavaScript:
document.addEventListener("scroll", function() {
  const header = document.querySelector(".site-header");
  if (window.scrollY > 50) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});
  1. Then style the scrolled state in CSS:
.site-header.scrolled {
  background-color: #fff !important; /* replace with your normal header color */
}

This will keep your header transparent over the hero/banner on mobile and then switch it back to your normal header style when scrolling.

6

Yes! this is exactly what is happening, And I think they messed up the coding to change the scrolled header. would you be able to do this for me?

7

Sure! did you want me to give it a try?

8

Hi @Mrstep,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

@media (max-width: 767px) {
  header.header.header-05 {
      position: absolute;
      width: 100%;
      background: transparent;
  }
}

image
image370×654 58.1 KB

image
image369×582 67 KB

9

yes if possible. Did you see the last part I entered about the logo not changing back to the correct color when scrolling

10

Thanks that works!! but, I am having a problem if I want all of the icons white and when it scroll to turn black. I “think” the logo file thats in the site theme is not picking up the white logo for the transparent header and turning it black when I scroll