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
Go to solution Solved by tuanphan,

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 post
  • Answers 45
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent; }  

Add to Home > Design > Custom CSS .header-announcement-bar-wrapper.black.shrink { background: red !important; }  

try .tweak-fixed-header .header .header-announcement-bar-wrapper { background: transparent !important; }  

Posted Images

Recommended Posts

  • 1

Add to Home > Design > Custom CSS

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

 

Link to post
  • 1

@Adam_Davidson@Wisemedia@tuanphanOn 7.1. first code line to fix header position. Second line to make drop down background transparent from folder. Set you header to transparent background in header pencil settings. 

.header#header {position: fixed!important;}

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

Edited by JOHNMD

mcgouran.john@gmail.com

Link to post
  • 0

@tuanphan I just tried this solution. It made the menu transparent on scrolling, but the dropdown folders still maintained their opaque background. Any advice?

I want to say this: for you and every other person who shares CSS expertise on these forums, I HUGELY appreciate you. I'm learning, but flail around with that part of design. Thank you, thank you. 

Link to post
  • 0

For that matter, do you know if it's possible to make the navigation background a transparent color, including the folder dropdowns? I tried everything that's worked for me in 7.0 and earlier to no avail.

 

Link to post
  • 0
12 hours ago, Adam_Davidson said:

For that matter, do you know if it's possible to make the navigation background a transparent color, including the folder dropdowns? I tried everything that's worked for me in 7.0 and earlier to no avail.

 

Can you share link to your site?

Link to post
  • 0

Came here as I'm having the same issue. On my home page I have a photo background so would love to make the navigation background and folder dropdowns transparent to be able to see the image. Presently the drop down is a black box. 

@tuanphan this is my first post in these threads which I have just discovered. I have implemented your code a few times already which has saved me big time, thankyou!

Link to post
  • 0
8 hours ago, Wisemedia said:

Came here as I'm having the same issue. On my home page I have a photo background so would love to make the navigation background and folder dropdowns transparent to be able to see the image. Presently the drop down is a black box. 

@tuanphan this is my first post in these threads which I have just discovered. I have implemented your code a few times already which has saved me big time, thankyou!

If you can share link, I can take a look

Link to post
  • 0
20 hours ago, tuanphan said:

If you can share link, I can take a look

Site:

mattwisemanmedia.com

Password: MWM123

Moreover, if you have a suggestion for how to make the photo category not all turn yellow - only the active page turn yellow - that would be awesome too. Thankyou!

Link to post
  • 0

Hello,

I am having similar issues with my header, it turned into a black box. I added this code that and it seems to have fixed the transparency issue. But the header does not stay fixed. Anyone have a suggestion? THANK YOU SOOO MUCH.

https://www.thecardinalconcepts.com/

Quote

.header#header {position: fixed!important;}
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    background: transparent !important;
}

 

Link to post
  • 0
8 hours ago, muzakcat said:

Hello,

I am having similar issues with my header, it turned into a black box. I added this code that and it seems to have fixed the transparency issue. But the header does not stay fixed. Anyone have a suggestion? THANK YOU SOOO MUCH.

https://www.thecardinalconcepts.com/

 

to enable fixed header, no need to use code. Hover on Header on Edit Mode > Click Edit Site Header > Style > Enable Fixed 

Link to post
  • 0

Thanks Tuanpahn,

I checked and "Fixed Position" was selected, but the Fixed Header Style was on Basic. When I changed it to "scroll back" it works now.

Thank you!

Cathy

Link to post
  • 0

So I tried this and it worked well, but what I didn't take into account was that my menu text is white and the background color on most of my pages is also white. (Shoulda seen that coming.)  Is there a way to make my header transparent when at the actual top of the page but turn solid white after scrolling past my top image?

I'm pretty new to this so sorry if this is a kinda obvious question, but how are you guys sharing your sites? Are you sharing your actual administrator login and password? (I hope not!) Or is there a way to give someone access to view your site before it's live?

Link to post
  • 0
13 hours ago, Nat-C said:

So I tried this and it worked well, but what I didn't take into account was that my menu text is white and the background color on most of my pages is also white. (Shoulda seen that coming.)  Is there a way to make my header transparent when at the actual top of the page but turn solid white after scrolling past my top image?

I'm pretty new to this so sorry if this is a kinda obvious question, but how are you guys sharing your sites? Are you sharing your actual administrator login and password? (I hope not!) Or is there a way to give someone access to view your site before it's live?

Yes. You can. If your site is trial, you can setup password & share url

Link to post
  • 0
On 6/22/2020 at 4:37 AM, tuanphan said:

Yes. You can. If your site is trial, you can setup password & share url

Thank you! That will make this process so much easier!

Do you know of a way to make my fixed header transparent when at the actual top of the page but turn into non-transparent after scrolling past my top image?

Edited by Nat-C
Link to post
  • 0
22 hours ago, Nat-C said:

Thank you! That will make this process so much easier!

Do you know of a way to make my fixed header transparent when at the actual top of the page but turn into non-transparent after scrolling past my top image?

If you share link to your site, I can check easier.

Link to post
  • 0
On 7/21/2020 at 10:15 AM, Nat-C said:

The link is: https://grey-cranberry-c4ar.squarespace.com/

And temporary password is: banana22

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0
On 8/25/2020 at 12:39 AM, tuanphan said:

Add to Home > Design > Custom CSS


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

OMG thank you! Do you happen to know what the color options are for the header? I changed it to black, which looks okay, but I was wondering if there might be another color option that would look better with my color scheme.

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

Create an account or sign in to comment

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


×
×
  • Create New...