Hello!
I’m having trouble disabling the transparency to my policy page. I want to keep the transparency for the rest of my website.
Any help will be greatly appreciated!
My website is bucksbury.com
Topic summary
A user seeks to disable the transparent header specifically on their policy pages while maintaining transparency elsewhere on their Dawn theme site.\n\nAttempted Solutions:\n- Multiple contributors suggested adding CSS code to base.css, theme.liquid, or header.liquid files\n- Initial approaches involved targeting .header-wrapper with background: #000000 !important and position: relative\n- Early attempts failed despite removing !important keywords from existing transparent header CSS\n\nWorking Solution:\n- Adding conditional CSS code before the </body> tag in theme.liquid successfully removed transparency\n- Code uses `{% if page.title contains \
Hello @bucksbury
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file.
.header-wrapper {
background: black !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
1 Like
Hello @bucksbury , Go to edit code → open theme.liquid file → in the {% style %} {% endstyle %} tags add CSS code above the {% endstyle %}.
{% if page.title contains "privacy" %}
.header-wrapper {
background: #000000 !important;
position: relative !important;
width: 100% !important;
top: 0px;
}
{% endif %}
See the screenshot below,
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
Thank you for replying so quickly! Unfortunately it didn’t work 
Ah thank you for replying so quickly! I tried this code but it didn’t work unfortunately.
Hello @bucksbury
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
{% if page.title contains ‘privacy-policy’ %}
{% endif %}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hello @bucksbury , I think in your theme.liquid file there is CSS of the transparent header, please remove the keyword !important from it and add my code with keyword !important please find the below CSS from your file.
/* your CSS in file remove !important from it */
.header-wrapper{
background: transparent !important;
position: absolute !important;
width: 100% !important;
top: 0px;
}
/* after remove !important add below code with important */
{% if page.title contains "privacy" %}
.header-wrapper {
background: #000000 !important;
position: relative !important;
width: 100% !important;
top: 0px;
}
{% endif %}
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
@bucksbury , Please find out from where this CSS with important is rendered and remove that !important keyword and add the provided code with page.title condition in the theme.liquid file. See the below screenshot and find out that CSS.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
Hello! I’ve remove the “!important” keyword from my header.liquid and added your code back into the theme.liquid. Unfortunately, nothing has changed
I’m sorry I forgot to mention that I’m making these edits on a duplicate theme so my changes might not show up on the official website.
Thank you for replying! Unfortunately, the code didnt work
@bucksbury , Okay 
. Try to put this conditional code in the “header.liquid” file and in that file remove also the keyword !important from the postion property and add conditional code with !important.
Hello! Thank you for replying! Unfortunately, the code didn’t work
I’ve added those edits in but unfortunately, the header is still transparent 
Here’s a screenshot just in case I’ve done something wrong
Please share me a preview URL of your staging theme with your preview password. So that I will check and let you know the exact solution here.
Hello @bucksbury , Go to edit code → open theme.liquid file and before add this code .
This will work for sure .
If that works Buy me couple of Pizzas 
Here you go: https://bucksbury.com/?_ab=0&_fd=0&_sc=1 I hope that works, I don’t think theres a password to access but please let me know if there is. Thank you for your continued help 
Ah!! This works! Thank you so much, I’ve encountered another problem unfortunately with this code. When I’m hovering over the links in the header, the text colour turns to black which makes it disappear into the header. Is there a way to fix this?
Hello try like this please,
{% if page.title contains "privacy" or page.title contains "policies" %}
.header-wrapper {
background: #000000 !important;
position: relative !important;
width: 100% !important;
top: 0px;
}
{% endif %}
Scratch that! It’s perfect now Thank you so much!
1 Like