Transparent Header in 7.0

Site URL: https://www.onekindcreative.com

I have read through quite a few threads and I haven't found an answer on this one. I am wanting a transparent header (something that 7.1 makes pretty easy). I have tried using code but I haven't been able to get the content to move up to the top of the screen (behind the logo and links). I want this on both web and mobile and all pages. I have also attached two design images of what I am trying to accomplish.

Add to Home > Design > Custom CSS

header.Header.Header--top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}
.Parallax-item:first-child {
    top: 0 !important;
}
/* mobile */
.Mobile.loaded {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}
.Mobile-bar.Mobile-bar--top {
    background: transparent;
}

would there be a way to change the code such that the header would be partially transparent, maybe like a 70% gradient? I know this is an easy feature in 7.1, but hoping to find a way to do it on a Brine 7.0 template.

14 hours ago, acolasanti said:

would there be a way to change the code such that the header would be partially transparent, maybe like a 70% gradient? I know this is an easy feature in 7.1, but hoping to find a way to do it on a Brine 7.0 template.

If same template, in above code, edit background: transparent; to

Quote

background: rgba(0,0,0,0.2)

the header in the site I am working on is white. Is there a way to make that white be partially transparent, as opposed to creating it a shade of black?

On 12/18/2021 at 2:56 AM, acolasanti said:

the header in the site I am working on is white. Is there a way to make that white be partially transparent, as opposed to creating it a shade of black?

 

use rgba(255,255,255,0.5)

If it doesn't work, please share link to your site, we can check easier

it worked! thank you so much!!

To follow up, it is working perfectly on every page, with the exception of the blog entries. The content is pushing up into the header. Because it isn't a page, I can't insert a spacer. Any thoughts on what I can do to create some space between this new transparent header and the blog entry?

33 minutes ago, acolasanti said:

To follow up, it is working perfectly on every page, with the exception of the blog entries.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Site URL: https://www.mehentertainment.co

I have tried almost everything to get a transparent site header. I have changed the style to dynamic, I've copied and pasted the codes in as well. Is there something that I'm missing? Please help please!

15 hours ago, Mauri said:

Site URL: https://www.mehentertainment.co

I have tried almost everything to get a transparent site header. I have changed the style to dynamic, I've copied and pasted the codes in as well. Is there something that I'm missing? Please help please!

Use this new CSS code (Website Tools > Custom CSS)

header#header {
    background-color: transparent !important;
}
article section:first-child {
    padding-top: 0px !important;
}