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

Transparent Header on Brine?!


Recommended Posts

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!

Link to post
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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, yo

Posted Images

  • 1 month later...
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?

Link to post
  • 2 months later...

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...

Link to post
  • 3 weeks later...
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?

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

 

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

 

Link to post
  • 1 month later...

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. 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post
  • 3 months later...
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?

Link to post
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

Link to post
  • 2 weeks later...
  • 1 month later...

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;
}

 

Link to post
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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...