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/25/2020 at 12:39 AM, tuanphan said:

.header-announcement-bar-wrapper.black.shrink { background: red !important; }

Sorry to have so many questions, but I just noticed that this part is only working on select pages and not on others. Can you help me figure out why and how to fix that?

Link to comment
  • 0
1 hour ago, Nat-C said:

Sorry to have so many questions, but I just noticed that this part is only working on select pages and not on others. Can you help me figure out why and how to fix that?

Which page has problem? Can you share link..

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
  • 0
  • 0
17 minutes ago, Nat-C said:

Password is: banana22

Try this code

.tweak-fixed-header:not(.sqs-edit-mode-active) .header .header-announcement-bar-wrapper.shrink {
    background: red !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
3 minutes ago, tuanphan said:

Where did you get green { and } in Line 1 & Line 4?

I have no idea. 😆 I deleted all the code and copied and pasted the code you sent again (to figure out where it came from) and it worked! Thanks again for your help!

Link to comment
  • 0
11 hours ago, 1982gonzo said:

-hey! I think I put every code in the CSS box, but I still have black square around drop down. Could you help me what I did wrong?

https://orchid-orca-dzt5.squarespace.com/config/settings/site-visibility

PW: dropdown

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    background: transparent !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
21 hours ago, Soditzy said:

Please could someone help me make my fixed menu transparent too please? I tried to add the code myself but it didn’t work.

Thanks so much!

Can you share site url? We can help easier

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
On 11/15/2020 at 11:27 PM, joshroos said:

@tuanphan I am having a similar issue as discussed above. Have a Fixed Position header set to transparent with header style set to Basic -- however I am still seeing a black header background momentarily after scrolling and as page loads. Mind taking a look?

 

https://rb4.squarespace.com/ 

Pass: RB4 

Hi. Do you still need help?

Also, I see scroll arrow on mobile is a bit off center. Do you want to fix?

https://rb4.squarespace.com/about

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
On 11/17/2020 at 9:58 PM, joshroos said:

@tuanphan yes! I figured out the header, can you help center align scroll arrow on mobile?

Hi. Sorry. Missing your notification. IT looks like you solved?

On 11/18/2020 at 12:17 AM, jpjustinpape said:

I am having this issue as well. When first accessing the page the transparency works but when you scroll down, it turns either black or white depending on the page you are on. I have tried all the code in this tread as well as code i have read in other threads with no success.
Any other options?

site: https://www.justinpape.com/

Add to Home > Design > Custom CSS

header#header {
    background: white !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 Tuanphan,

I have tried all the various code mentioned in this thread on a 7.1 site and haven't met with success either. Attaching an image of the sticky menu - currently appearing with grey background. 787545290_ScreenShot2021-03-05at1_29_53PM.thumb.png.6d727ea36f0764038c3b4a05b65f378c.png

I am temporarily going to disable the "fixed" header since it looks bad with the background but the site link is this: https://giraffe-salmon-2jdl.squarespace.com/ pass: FMA

 

Also, is it possible to have an item (text or image) in the bottom left corner fixed at all times?

Thanks!

-Kerin

Link to comment
  • 0
On 3/6/2021 at 1:36 AM, kerin said:

Hi Tuanphan,

I have tried all the various code mentioned in this thread on a 7.1 site and haven't met with success either. Attaching an image of the sticky menu - currently appearing with grey background. 787545290_ScreenShot2021-03-05at1_29_53PM.thumb.png.6d727ea36f0764038c3b4a05b65f378c.png

I am temporarily going to disable the "fixed" header since it looks bad with the background but the site link is this: https://giraffe-salmon-2jdl.squarespace.com/ pass: FMA

 

Also, is it possible to have an item (text or image) in the bottom left corner fixed at all times?

Thanks!

-Kerin

Add to Design > Custom CSS

header#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

 

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
On 4/18/2021 at 2:10 PM, christina_marie_333 said:

How do i set header trasparent on 7.0 style sqaurespace website? 

www.huntandgathergrocer.com.au

Transparent header on homepage only or entire site?

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
23 hours ago, Danielacheson said:

For me 7.1 simple 

.header {
  background: transparent!important;
}

Thanks mate. This is the only solution that worked for me to have transparent background in a non fixed position when i scroll up.

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