How to create a transparent header bar on mobile ?

Hey,

can anyone of you guys helped me with a transparent mobile bar?

I just want to have the black bar transparent:

Iam working with a Brine Template ( Cocoa )

Thank you so much 🙂

Need site url to give exactly code @wearesilk

9 hours ago, tuanphan said:

Need site url to give exactly code @wearesilk

Hello Tuanphan,

the website is not Online at this moment.

we still working on the website.

any other idea how you can helped us out? 🙂

Thank you and have a nice day.

Dani

On 12/20/2019 at 4:47 PM, wearesilk said:

Hello Tuanphan,

the website is not Online at this moment.

we still working on the website.

any other idea how you can helped us out? 🙂

 

Thank you and have a nice day.

Dani

 

If you can't share url, try inspect element, then use CSS

.enter-mobile-header-class-name-here {
	background: transparent;
}

Hi There!

I would like to have my header transparent on mobile, but when clicked, go to a solid colour.
Site:
Http://dram.app
Password:
iloveBeer22!

This is what it should look like before being clicked:


Then when clicked it should change to a solid colour:



The code im using for this section is:

media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
background-color: #0f1c0b !important; 
  }
}

.header-menu-cta {
  background-color: #f7efe6; 
}

.header-menu-nav-folder-content {
  background-color: #f7efe6; 
}

.burger-inner:after {
    background: #f7efe6 !important;
}
.burger-inner:before {
    background: #f7efe6 !important;
}

.header-menu-nav * {
    color: #0f1c0b !important;
}

.burger-inner>div {
    height: 2px !important;
}

.burger--active .burger-box .burger-inner>div {
    background: #f7efe6 !important;
}


Any help, greatly appreciated!

6 hours ago, Oliver_H said:

Hi There!

I would like to have my header transparent on mobile, but when clicked, go to a solid colour.
Site:
Http://dram.app
Password:
iloveBeer22!

This is what it should look like before being clicked:

Then when clicked it should change to a solid colour:


The code im using for this section is:

media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
background-color: #0f1c0b !important; 
  }
}

.header-menu-cta {
  background-color: #f7efe6; 
}

.header-menu-nav-folder-content {
  background-color: #f7efe6; 
}

.burger-inner:after {
    background: #f7efe6 !important;
}
.burger-inner:before {
    background: #f7efe6 !important;
}

.header-menu-nav * {
    color: #0f1c0b !important;
}

.burger-inner>div {
    height: 2px !important;
}

.burger--active .burger-box .burger-inner>div {
    background: #f7efe6 !important;
}


Any help, greatly appreciated!

Add to Custom CSS

body.header--menu-open .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
    background-color: #f7efe6 !important;
}