sheenvs Posted April 26, 2022 Share Posted April 26, 2022 (edited) 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; } Edited April 26, 2022 by sheenvs Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 You mean Home: transparent header Other pages: Solid background header Is this right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sheenvs Posted May 5, 2022 Author Share Posted May 5, 2022 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? Link to comment
tuanphan Posted May 8, 2022 Share Posted May 8, 2022 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; } sheenvs and ruggeroromano 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sheenvs Posted May 9, 2022 Author Share Posted May 9, 2022 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
melchiormahot Posted March 10 Share Posted March 10 (edited) 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 March 10 by melchiormahot Link to comment
tuanphan Posted March 12 Share Posted March 12 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
melchiormahot Posted March 13 Share Posted March 13 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
tuanphan Posted March 16 Share Posted March 16 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
pentool Posted March 16 Share Posted March 16 Why is everyone going about a simple thing the most complex way? Link to comment
melchiormahot Posted March 16 Share Posted March 16 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? Screen Recording 2023-03-16 at 15.20.20.mov Link to comment
melchiormahot Posted March 16 Share Posted March 16 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 Screen Recording 2023-03-16 at 15.20.20.mov Link to comment
pentool Posted March 16 Share Posted March 16 (edited) Did you check out the demo site I posted? The burger menu IS visible on both desktop and mobile on both pages. Edited March 16 by pentool Link to comment
melchiormahot Posted March 16 Share Posted March 16 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
melchiormahot Posted March 16 Share Posted March 16 BTW my header style is on dynamic Link to comment
melchiormahot Posted March 16 Share Posted March 16 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 Link to comment
melchiormahot Posted March 16 Share Posted March 16 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. Link to comment
pentool Posted March 16 Share Posted March 16 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment