MAKE HEADER NON-TRANSPARENT

Nato0201 · ‎08-01-2024

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

Dan-From-Ryviu · ‎08-01-2024

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>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎08-01-2024

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>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Nato0201 · ‎08-02-2024

Thanks heaps!

EBOOST · ‎08-02-2024

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>

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips

Nato0201 · ‎08-02-2024

Thanks for reaching out! I intentionally have those pages headers transparent, but good to know for future. Thank you.

MAKE HEADER NON-TRANSPARENT

MAKE HEADER NON-TRANSPARENT

Community Blog Articles