Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to create a transparent header bar on mobile ?


Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Need site url to give exactly code @wearesilk

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1 year later...

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:
image.png.c888ed7ef8093048f74afe819ff57ee0.png

Then when clicked it should change to a solid colour:

image.png.a8d2d07720ec2cfe0d47fe70c078ca2b.png

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!

image.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...