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

Fixed AND transparent header/menu. How?? (SS 7.1)


peterbjerg

Question

Site URL: https://amal-testsite.squarespace.com

Hi all

In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. 

BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. 
 

so how do I set or code to get transparent header/navigation menu when it’s also fixed? 
 

test site:

https://amal-testsite.squarespace.com 

password is: abcabc 

 

Link to comment

Recommended Posts

  • 0
On 8/19/2021 at 9:18 PM, Patterson said:

Hello,

I am having similar issue where I want the section above my floating nav bar to appear "FULL BLEED" all the way through rather than show the default background color above the gallery.

I can confirm the gallery is set to full bleed.

Please let me know if you need any other information from me? Thanks!

 

https://flamingo-goby-tkw6.squarespace.com/

PW: greenfield

Screen Shot 2021-08-19 at 10.16.55 AM.png

Add to Design > Custom CSS

[data-section-id="611e614b16bba17aa34f2211"] {
    padding-top: 0px !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

Link to comment
  • 0

Hi there!😀

I'm having the same problems. The header does not seem to be affected by the code. My goal is to have a fixed transparent header. Currently, SS has a transparent header that is fixed, but scrolls back with a color of chosen theme color palette. 

Here is what I tried:
 

- Adding Custom CSS 

header#header {position: fixed!important;}

.header-nav-folder-content {
   background: transparent!important;
}


- Then deleted and tried:


.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent; }

- Then deleted and tried:

.header {
  background: transparent!important;
}


- None of the above seem to have any impact on the design.
Site link: https://apricots-round-erx9.squarespace.com/

Please help 🙏


UPDATE: I just figured out an easy solution from a different forum. 

- Use this code in Custom Css

#header { background: rgba(0,0,0,0.5); }

- Remove the ".5" and it will be completely transparent. '0.5' will make it 50% transparent which is kinda a nice solution too!

 

Carina K

 



 

Edited by CarinaG
Link to comment
  • 0
10 hours ago, CarinaG said:

Hi there!😀

I'm having the same problems. The header does not seem to be affected by the code. My goal is to have a fixed transparent header. Currently, SS has a transparent header that is fixed, but scrolls back with a color of chosen theme color palette. 

Here is what I tried:
 

- Adding Custom CSS 

header#header {position: fixed!important;}

.header-nav-folder-content {
   background: transparent!important;
}


- Then deleted and tried:


.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent; }

- Then deleted and tried:

.header {
  background: transparent!important;
}


- None of the above seem to have any impact on the design.
Site link: https://apricots-round-erx9.squarespace.com/

Please help 🙏


UPDATE: I just figured out an easy solution from a different forum. 

- Use this code in Custom Css

#header { background: rgba(0,0,0,0.5); }

- Remove the ".5" and it will be completely transparent. '0.5' will make it 50% transparent which is kinda a nice solution too!

 

Carina K

 



 

Do you still need help or you fixed all?

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

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