MAKE HEADER NON-TRANSPARENT

Solved

MAKE HEADER NON-TRANSPARENT

Nato0201
Excursionist
65 0 5

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.Screen Shot 2024-08-02 at 12.50.33 AM.png

 

Any help is appreciated!

 

https://ap-perform.com/apps/track123

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

This is an accepted solution.

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>

Screenshot 2024-08-02 at 09.29.12.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

This is an accepted solution.

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>

Screenshot 2024-08-02 at 09.29.12.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
Excursionist
65 0 5

Thanks heaps!

EBOOST
Shopify Partner
1295 327 391

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 }}

EBOOST_0-1722586759909.png

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>

EBOOST_1-1722587372288.png

 

EBOOST_2-1722587426565.png

EBOOST_5-1722587572223.png

 

EBOOST_3-1722587435533.png

EBOOST_6-1722587601719.png

 

EBOOST_4-1722587451258.png

EBOOST_7-1722587625417.png

 

 

 

 

- 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
- ❤❤DONATE ❤❤Coffee tips
Nato0201
Excursionist
65 0 5

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