Hey team,
Looking to make the header on ONLY this page non-transparent (ideally black header), so the tracking page doesn’t sit behind it and is separate.
Any help is appreciated!
Topic summary
A user wants to make the header non-transparent (ideally black) on a specific tracking page to prevent content from sitting behind it.
Solutions Provided:
-
Simple approach: Add CSS code to the theme.liquid file after the
<head>tag to target the specific page. -
Comprehensive solution: A more robust method that:
- Adds a dynamic class to the
<body>tag based on the page URL path - Uses this class to apply non-transparent header styling to multiple pages (cart, about/story, track123)
- Prevents errors on pages without banners
- Includes detailed step-by-step instructions with code snippets and screenshots
- Adds a dynamic class to the
Resolution: The user confirmed some pages intentionally have transparent headers but appreciated the solutions for future reference. The discussion appears resolved with working code provided.
Hi @Nato0201
You can try to add this code to theme.liquid file, after in Online Store > Themes > Edit code and check
1 Like
Hi @Nato0201 ,
I checked your store. You have some pages that don’t have a banner after that will met this error. S I suggest to update code these steps:
-
Go to Store Online-> theme → edit code
-
Layout/theme.liquid then find
-
Refer screenshot to add code below( add class to body)
{{request.path | split: '/' | last }}
- Base on this class. Add Code below to end of this file and before tag. Code below will apply for cart page, our story page, track123 page.
Thanks heaps!
Thanks for reaching out! I intentionally have those pages headers transparent, but good to know for future. Thank you.