Transparent header background on homepage only

Site URL: https://therapinxy-directory.squarespace.com

Password: 2022

I'd like to make the header background transparent on only the homepage. I tried the following w/o success:

Quote

.homepage .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important;
}

You mean

• Home: transparent header
• Other pages: Solid background header

Is this right?

On 4/29/2022 at 2:44 AM, tuanphan said:

You mean

• Home: transparent header
• Other pages: Solid background header

Is this right?

Yes that's right! Is it possible?

On 5/5/2022 at 8:48 AM, sheenvs said:

Yes that's right! Is it possible?

Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage header#header {
    background-color: transparent !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}

On 5/8/2022 at 12:39 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0px !important;
}
body.homepage header#header {
    background-color: transparent !important;
}
body.homepage .header-background-solid {
    background-color: transparent !important;
}

 

It worked! Thank you!

I have a question regarding the header on the desktop and mobile. 

I have managed to make it transparent, which is what I wanted, however now the mobile version homepage is missing the burger in order to navigate the website. 

Is there a way to make the desktop version main page header transparent but not the mobile version?

This is the code that enables the header to be transparent but it makes it for both:

<style>
#header-sections {

 display: transparent!important;}

<style>

I tried to add this to the code to make it only for desktops but doesn't seem to work:

<style>
#header-sections {
@media only screen and (min-width: 1200px) {
  display: transparent!important;}
  }
<style>

Thank you for anyone that can help

Website: https://begonia-moose-apwg.squarespace.com/config/pages

Password: Querantonnais

x

On 3/10/2023 at 11:36 PM, melchiormahot said:

I have a question regarding the header on the desktop and mobile. 

I have managed to make it transparent, which is what I wanted, however now the mobile version homepage is missing the burger in order to navigate the website. 

Is there a way to make the desktop version main page header transparent but not the mobile version?

This is the code that enables the header to be transparent but it makes it for both:

<style>
#header-sections {

 display: transparent!important;}

<style>

 

I tried to add this to the code to make it only for desktops but doesn't seem to work:

<style>
#header-sections {
@media only screen and (min-width: 1200px) {
  display: transparent!important;}
  }
<style>

Thank you for anyone that can help

 

Website: https://begonia-moose-apwg.squarespace.com/config/pages

Password: Querantonnais

x

To change burger color, add this code

<style>
  .burger-inner>div {
    background-color: black !important;
}
</style>

On 3/12/2023 at 9:40 AM, tuanphan said:

To change burger color, add this code

<style>
  .burger-inner>div {
    background-color: black !important;
}
</style>

 

Thank you, I have tried that, and it basically put the burger back on for the phone version, but cancels for some reason the transparent header i coded in, on the web version and phone. 

Should i send you pictures for that? 

Thank you for you help. 

x

On 3/13/2023 at 9:36 PM, melchiormahot said:

Thank you, I have tried that, and it basically put the burger back on for the phone version, but cancels for some reason the transparent header i coded in, on the web version and phone. 

Should i send you pictures for that? 

Thank you for you help. 

x

Can you send all current code after you added my code? Maybe you place in wrong position

& take a screenshot of problem, we can check easier

Why is everyone going about a simple thing the most complex way?

Thank you , I tried this as well but i think my issue is a bit different than this i have taken a video of what i want which is how I have it now. but my only issue and you can see that from the video i attached, is that the burger on the phone is absent on the homepage because i made the header transparent. 

Therefore i wanted to know if there is any way i can make the header transparent for the desktop and keep it normal for the phone version?

Thank you for your time

31 minutes ago, pentool said:

Why is everyone going about a simple thing the most complex way?

 

6 hours ago, tuanphan said:

Can you send all current code after you added my code? Maybe you place in wrong position

& take a screenshot of problem, we can check easier

Can I give you my log in so you can see what i mean? basically if you check on mobile and desktop you will see that on mobile, and only on the homepage the burger is absent and on the other pages it is there. If i remove the code the buger reappears, therefore i wanted to know if there was a way to only make the header transparent for the desktop and not mobile? 

Thank you for your time 

Did you check out the demo site I posted? The burger menu IS visible on both desktop and mobile on both pages.

11 minutes ago, pentool said:

Did you check out the demo site I posted? The burger menu IS visible on both desktop and mobile on both pages.

Ahh yes just checked and you right its on both. 

Do you think it is because i input this code to remove the footer as well? Because on the demo you have the red footer

<style>
 #footer-sections {
  display: none!important;}
</style>

 

BTW my header style is on dynamic 

OK so I see, I removed the code to make the header transparent, but basically i need to make the image or page smaller so as to remove any scrolling possible for the header to be transparent. But then there is this grey bar at the bottom 

5 minutes ago, melchiormahot said:

OK so I see, I removed the code to make the header transparent, but basically i need to make the image or page smaller so as to remove any scrolling possible for the header to be transparent. But then there is this grey bar at the bottom 

Also I realised that any time that there is a scrolling possibility the dynamic white header comes back, if you see what i mean. 

I don't have any issues with the scrolling. The dynamic white header (or whatever color your background is) will come back is you selected the Fixed header Scroll Back style. If the header is transparent and is fixed, when you start scrolling you will not see the menu because it will overlap with other elements on the page and gets messy and confusing. Hence you need to have a background color for the header when you scroll out. If you don't want the white header to come back when you scroll out, don't use Fixed Header style.