Transparent Header on Brine?!

How do you make the main header on Brine transparent? I know there is a button in the design settings on Bedford, for instance, but can't figure it out in Brine for the life of me. My client had a white header and now wants a transparent background. I set the header background to hsla(0, 0%, 100%, 0.05), which displays as transparent on the home page while working on it, but not on the live site.

www.rolddesign.com

Thank you!

Have you solved yet?

I have the same question.

How do I make my header menu float over the background ("poster") image?

14 hours ago, Erik-The-Bee said:

I have the same question.

How do I make my header menu float over the background ("poster") image?

Can you share link to your site?

I am using the Heights template. It has this transparent header and parallax, just like brine. When I go to edit the header and move the site title and primary navigation it creates a header with a black background. I can change the color of this background, but there is nowhere to select the transparency level. Entering the transparent value (0, 0, 100, 0.05) manually doesn't work either...

I have the same issue, using Brine template 7.0, this is my website

Found this in the forum, but when I tried it, half my elements completely disappear when I set elements to bottom

52 minutes ago, eastinaz said:

I have the same issue, using Brine template 7.0, this is my website

Found this in the forum, but when I tried it, half my elements completely disappear when I set elements to bottom

 

you want transparent header or? and which page?

I am also wanting a site-wide transparent background and I am working in 7.0. my site is:

www.onekindcreative.com

I have attached pictures of what I am going for. 

Same for me! Would love to make my navigation header have a transparent background: https://www.natalienphotography.com/

On 5/19/2020 at 1:19 PM, natalienphoto said:

Same for me! Would love to make my navigation header have a transparent background: https://www.natalienphotography.com/

Add to Home > Design > Custom CSS

header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    width: 100%;
    background: transparent;
}

On 5/18/2020 at 11:51 PM, OneKindKevin said:

I am also wanting a site-wide transparent background and I am working in 7.0. my site is:

www.onekindcreative.com

I have attached pictures of what I am going for. 

 

 

header.Header.Header--top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

On the Brine template, you don’t need code to have a transparent header, you can achieve this in Site Styles by moving the header element positions. However, it’s not very intuitive.

In Brine, you can set the position of each header element. For example, you can set the site title to Top-Left, Top-Right, Top-Center, Bottom-Left, Bottom-Right and so on.  If you set any header elements to a "Top” position they will appear with a solid colour header background. However, if all header elements are set to a "Bottom" position, they will float on the page, and you will effectively have a transparent header. 

On 7/17/2020 at 10:13 AM, paul2009 said:

On the Brine template, you don’t need code to have a transparent header, you can achieve this in Site Styles by moving the header element positions. However, it’s not very intuitive.

In Brine, you can set the position of each header element. For example, you can set the site title to Top-Left, Top-Right, Top-Center, Bottom-Left, Bottom-Right and so on.  If you set any header elements to a "Top” position they will appear with a solid colour header background. However, if all header elements are set to a "Bottom" position, they will float on the page, and you will effectively have a transparent header. 

I've used this method to create a transparent header but it only works on the main Home Index page. All the other pages has the original white background. Great when I have a white page but not so great when I want a coloured intro section.

Is there a way to target the blog list page so I can have that as transparent too?

On 10/29/2020 at 7:53 PM, Yviemarie said:

I've used this method to create a transparent header but it only works on the main Home Index page. All the other pages has the original white background. Great when I have a white page but not so great when I want a coloured intro section.

Is there a way to target the blog list page so I can have that as transparent too?

Can you share link to blog list page? We can help easier

On 10/30/2020 at 3:08 PM, tuanphan said:

Can you share link to blog list page? We can help easier

Thanks! The current workaround is to have a banner image to force the nav to display the overlay version (transparent) but I really just want the background colour to show, not an image at all.

https://yocostudio.co.uk/blog

This code worked well to give me a transparent background on my top header, but now has caused the Search Bar in the top header to stop working. Any workarounds to this? 

header.Header.Header--top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

9 hours ago, jasmine said:

This code worked well to give me a transparent background on my top header, but now has caused the Search Bar in the top header to stop working. Any workarounds to this? 

header.Header.Header--top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

 

If you share site url, we can help easier