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

  • 1

Add to Home > Design > Custom CSS

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 4

@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 comment
  • 0

Add !important to after

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

try

.tweak-fixed-header .header .header-announcement-bar-wrapper {
    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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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 comment
  • 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?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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 comment
  • 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.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Create an account or sign in to comment

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

×
×
  • Create New...