MAKE HEADER NON-TRANSPARENT
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!
https://ap-perform.com/apps/track123
Hi @Nato0201
You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code and check
<style>
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header { position: relative; }
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header .header-navigation { background: #000 !Important; }
</style>
Hi @Nato0201
You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code and check
<style>
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header { position: relative; }
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header .header-navigation { background: #000 !Important; }
</style>
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:
1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid then find <body>
3. Refer screenshot to add code below( add class to body)
{{request.path | split: '/' | last }}
4. Base on this class. Add Code below to end of this file and before </body> tag. Code below will apply for cart page, our story page, track123 page.
<style>
.cart sticky-header.header-navigation-wrapper,
.track123 sticky-header.header-navigation-wrapper,
.our-story sticky-header.header-navigation-wrapper {
position: sticky!important;
}
.cart .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation,
.track123 .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation,
.our-story .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation {
background-color: #000 !important;
}
</style>
