Jump to content

Transparent header background on homepage only

Recommended Posts

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Link to comment
  • 10 months later...

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

Edited by melchiormahot
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

 

 

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

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

 

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

Screenshot 2023-03-16 at 17.54.22.png

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

Link to comment

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.

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.