As seen there is a transparent bar between the announcement bar and the header of my site. I tried to remove it using multiple ways i have found on the forum, but nothing works.
Website: shbqa.com
Password: 1
Theme: Dawn
Topic summary
A user encountered an unwanted transparent bar appearing between the announcement bar and header on their Shopify site (Dawn theme, password: 1). Despite trying multiple solutions found on forums, nothing worked.
Solution Provided:
A community member offered a fix involving:
- Accessing Online Store → Edit Code → theme.liquid file
- Adding custom CSS code above the
</body>tag to remove the transparent bar
The solution successfully resolved the issue. The original poster confirmed it worked perfectly.
Alternative Approach:
Another user suggested a similar method but with conditional CSS targeting only the index template, placed before the </body> tag in theme.liquid.
Status: Resolved - the transparent bar was successfully removed using custom CSS injection.
1 Like
Hey @SHBQA
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Thank you so much that worked perfectly.
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Hi @SHBQA
Check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if template == 'index' %}
{% endif %}
- And Save.
- Result:
