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

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.

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

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

Add to Design > Custom CSS

[data-section-id="611e614b16bba17aa34f2211"] {
    padding-top: 0px !important;
}

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

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?

15 hours ago, tuanphan said:

Do you still need help or you fixed all?

I got it! Thank you so much for the quick response !

On 5/14/2020 at 1:37 AM, JOHNMD said:

@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 

This worked for Elucid!  Thank you!!! 

They should really make transparency an option somewhere.. it's lazy not to

My nav bar is currently set to fixed, basic, dynamic, but when I scroll it adds a background. I want it to stay transparent background when scrolling. Is there a code for this?

https://www.grandnationxl.com/press

On 3/11/2023 at 6:59 AM, grandnationxl said:

My nav bar is currently set to fixed, basic, dynamic, but when I scroll it adds a background. I want it to stay transparent background when scrolling. Is there a code for this?

https://www.grandnationxl.com/press

Add to Design > Custom CSS

/* Transparent header */
header#header {
    background-color: transparent !important;
}

Hello 

I am trying to make (home page only)navigation bar transparent, for mobile  and desktop both. please help. 

The website is not public yet

On 8/30/2023 at 1:01 AM, Meghna said:

Hello 

I am trying to make (home page only)navigation bar transparent, for mobile  and desktop both. please help. 

The website is not public yet

You can follow this guide to share url with trial/unpublished site

On 7/18/2021 at 7:12 PM, Danielacheson said:

For me 7.1 simple 

.header {
  background: transparent!important;
}

This worked perfectly for me!