Meghna Posted August 30, 2023 Posted August 30, 2023 Hello I am trying to make Front navigation bar Transparent Front Page only (7.1). But the above code doesn't work for me. Please help.
tuanphan Posted September 2, 2023 Posted September 2, 2023 On 8/30/2023 at 10:44 PM, Meghna said: Hello I am trying to make Front navigation bar Transparent Front Page only (7.1). But the above code doesn't work for me. Please help. What is your site url? We can check it 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!)
Meghna Posted September 2, 2023 Posted September 2, 2023 Thank you for your response 🙂 https://leopard-tomato-dja8.squarespace.com/ password09
tuanphan Posted September 4, 2023 Posted September 4, 2023 On 9/2/2023 at 7:20 PM, Meghna said: Thank you for your response 🙂 https://leopard-tomato-dja8.squarespace.com/ password09 I see you figured it out? 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!)
Meghna Posted September 11, 2023 Posted September 11, 2023 hello @tuanphan , I did manage to make the navigation transparent. I kept the font black (navigation and brand logo) for the whole website, then i decreased the opacity of navigation bar background to 0. to make the font visible on the front page, I changed it to white with the following code. But the cart icon is still black so its not visible. and this is on the phone I would like to make them white please both on the phone and desktop only front/home page. and the overlay navigation on the phone has white font for the brand logo, cart icon, burger icon and social links- i would like them to be in black please so they are visible. Please help.
tuanphan Posted September 14, 2023 Posted September 14, 2023 On 9/11/2023 at 7:14 PM, Meghna said: hello @tuanphan , I did manage to make the navigation transparent. I kept the font black (navigation and brand logo) for the whole website, then i decreased the opacity of navigation bar background to 0. to make the font visible on the front page, I changed it to white with the following code. But the cart icon is still black so its not visible. and this is on the phone I would like to make them white please both on the phone and desktop only front/home page. and the overlay navigation on the phone has white font for the brand logo, cart icon, burger icon and social links- i would like them to be in black please so they are visible. Please help. The site is expired. You can access this link to extend it for free 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!)
Meghna Posted September 14, 2023 Posted September 14, 2023 @tuanphan thank you the website is working now could you please help me out with the above query.
tuanphan Posted September 17, 2023 Posted September 17, 2023 On 9/14/2023 at 3:32 PM, Meghna said: @tuanphan thank you the website is working now could you please help me out with the above query. Use this CSS code body.homepage:not(.header--menu-open) svg.icon.icon--cart { stroke: white !important; } body.homepage:not(.header--menu-open) .burger-inner>div { background-color: white !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!)
JoMin Posted October 6, 2023 Posted October 6, 2023 (edited) Hi @tuanphan, I have tried a few different versions of your code, but can't get the homepage to have the transparent header background. Could you take a look? Thank you! https://www.jominceramic.com/ Edit: Managed to find another of your code snippets and work out a solution, thank you! Edited October 7, 2023 by JoMin Issue fixed
Abbas40 Posted October 8, 2023 Posted October 8, 2023 Hi @tuanphan, I currently have a transparent header. But as soon as I scroll, this header remains transparent so the text is not always clear. I want the header to have its own background as soon as I scroll. So basically the only time that it’s transparent, is at the top of my homepage. Example of how I want: https://www.bespokestylings.com/ My URL: https://trend-za.nl Would you look at my page? Thanks in advance!
tuanphan Posted October 9, 2023 Posted October 9, 2023 On 10/8/2023 at 7:29 AM, Abbas40 said: Hi @tuanphan, I currently have a transparent header. But as soon as I scroll, this header remains transparent so the text is not always clear. I want the header to have its own background as soon as I scroll. So basically the only time that it’s transparent, is at the top of my homepage. Example of how I want: https://www.bespokestylings.com/ My URL: https://trend-za.nl Would you look at my page? Thanks in advance! Can you check your site url again? 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!)
Abbas40 Posted October 9, 2023 Posted October 9, 2023 (edited) Is it not working? Seem to work fine with me.. @tuanphan Edited October 9, 2023 by Abbas40
creedon Posted October 9, 2023 Posted October 9, 2023 On 10/7/2023 at 5:29 PM, Abbas40 said: My URL: https://trend-za.nl This is where I ended up after redirecting through several sites. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
tuanphan Posted October 12, 2023 Posted October 12, 2023 On 10/9/2023 at 7:54 PM, Abbas40 said: Is it not working? Seem to work fine with me.. @tuanphan I meant your site is Shopify, not Squarespace and currently header is not sticky on scroll. 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!)
FPV Posted October 25, 2023 Posted October 25, 2023 Hi, @tuanphan I too am trying to get only my homepage header to be transparent. Unfortunately, no code I've found has worked for me. Could you please take a look? The template family is Brine and the version is 7.0 https://www.preventionofviolence.com/ Thanks in advance!
tuanphan Posted October 27, 2023 Posted October 27, 2023 On 10/25/2023 at 3:33 PM, FPV said: Hi, @tuanphan I too am trying to get only my homepage header to be transparent. Unfortunately, no code I've found has worked for me. Could you please take a look? The template family is Brine and the version is 7.0 https://www.preventionofviolence.com/ Thanks in advance! Add to Website Tools (under Not Linked) > Custom CSS > Then save & reload the site body.homepage header.Header.Header--top { position: absolute; left: 0; width: 100%; z-index: 9999; 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!)
FPV Posted October 28, 2023 Posted October 28, 2023 (edited) It worked. Thank you so much! Edited October 28, 2023 by FPV
lpctxk Posted April 23 Posted April 23 I've input all of the code given to make my header transparent on the home page, but I haven't been able to get it to work. Thanks for your help https://lpctxk.com/
tuanphan Posted April 26 Posted April 26 On 4/24/2024 at 1:28 AM, lpctxk said: I've input all of the code given to make my header transparent on the home page, but I haven't been able to get it to work. Thanks for your help https://lpctxk.com/ I see your homepage header already transparent, you try checking it again. 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!)
EchoWines Posted November 24 Posted November 24 I'm quite struggling with this. I've tried everything and can't get it to work. Would love transparent header only on this page : www.echowines.com/home (it's not currently set as the home page while under construction but will be eventually!) I've tried basically all the custom css provided and nothing works. Please help!
tuanphan Posted November 27 Posted November 27 On 11/25/2024 at 4:27 AM, EchoWines said: I'm quite struggling with this. I've tried everything and can't get it to work. Would love transparent header only on this page : www.echowines.com/home (it's not currently set as the home page while under construction but will be eventually!) I've tried basically all the custom css provided and nothing works. Please help! You can use this to Website Tools > Custom CSS #collection-65f1fbe7d6ee51239547d90e { article>section:first-child { padding-top: 0px !important; } .header-background-solid, header#header { 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment