Emerge theme: transparent and sticky header

Klaw2OC · ‎01-29-2024

Hi all, I am trying to find how to enable transparent and sticky header in the Emerge theme.

Any assistance would be greatly appreciated

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

Hi, It's done. Could you check if it is ok now?

- 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

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

Hi @Klaw2OC

Could you share your store URL?

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

Klaw2OC · ‎01-29-2024

Sure.

https://b7ff16-2.myshopify.com/

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

Hi @Klaw2OC

You can try to add this code to your theme.liquid file after <head> element in Online store > Themes > Edit code, save file and check it it work

    <style>
        /* Add styles for the sticky header */
        #shopify-section-header {
            /* Set initial styles */
            transition: all 0.3s;
        }

        #shopify-section-header.header-sticky {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
    </style>   
 <script>
        document.addEventListener("DOMContentLoaded", function () {
            var headerDiv = document.getElementById("shopify-section-header");

            // Function to add or remove the "header-sticky" class based on scroll position
            function toggleStickyHeader() {
                var scrollPosition = window.scrollY || window.pageYOffset;

                if (scrollPosition >= headerDiv.offsetTop) {
                    headerDiv.classList.add("header-sticky");
                } else {
                    headerDiv.classList.remove("header-sticky");
                }
            }

            // Add scroll event listener to toggle sticky header
            window.addEventListener("scroll", toggleStickyHeader);
        });
    </script>

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

Klaw2OC · ‎01-29-2024

It works! However, I would like the header (not transparent this time) to stay under the banner and become sticky only after scrolling through the banner. Is this possible?

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

Please update the code and check again

    <style>
        /* Add styles for the sticky header */
        #shopify-section-header {
            /* Set initial styles */
            transition: all 0.8s;
        }

        #shopify-section-header.header-sticky .header--root {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
    </style>   
 <script>
        document.addEventListener("DOMContentLoaded", function () {
            var headerDiv = document.getElementById("shopify-section-header");

            // Function to add or remove the "header-sticky" class based on scroll position
            function toggleStickyHeader() {
                var scrollPosition = window.scrollY || window.pageYOffset;

                if (scrollPosition >= headerDiv.offsetTop) {
                    headerDiv.classList.add("header-sticky");
                } else {
                    headerDiv.classList.remove("header-sticky");
                }
            }

            // Add scroll event listener to toggle sticky header
            window.addEventListener("scroll", toggleStickyHeader);
        });
    </script>

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

Klaw2OC · ‎01-29-2024

The header shouldn't be transparent any more, even when scrolling down.

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

Code update

    <style>
        /* Add styles for the sticky header */
        #shopify-section-header {
            /* Set initial styles */
            transition: all 0.2s;
        }

        #shopify-section-header.header-sticky .header--root {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            background: #fff;
        }
    </style>   
 <script>
        document.addEventListener("DOMContentLoaded", function () {
            var headerDiv = document.getElementById("shopify-section-header");

            // Function to add or remove the "header-sticky" class based on scroll position
            function toggleStickyHeader() {
                var scrollPosition = window.scrollY || window.pageYOffset;

                if (scrollPosition > headerDiv.offsetTop) {
                    headerDiv.classList.add("header-sticky");
                } else {
                    headerDiv.classList.remove("header-sticky");
                }
            }

            // Add scroll event listener to toggle sticky header
            window.addEventListener("scroll", toggleStickyHeader);
        });
    </script>

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

Klaw2OC · ‎01-29-2024

Is there a way to avoid the header flickering during the transition?

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

Could you update code to this and check again?

    <style>
        /* Add styles for the sticky header */
        #shopify-section-header {
            /* Set initial styles */
            transition: all 0.2s;
        }

        #shopify-section-header.header-sticky .header--root {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            background: #fff;
        }
    </style>   
 <script>
        document.addEventListener("DOMContentLoaded", function () {
            var headerDiv = document.getElementById("main-content");

            // Function to add or remove the "header-sticky" class based on scroll position
            function toggleStickyHeader() {
                var scrollPosition = window.scrollY || window.pageYOffset;

                if (scrollPosition > headerDiv.offsetTop) {
                    headerDiv.classList.add("header-sticky");
                } else {
                    headerDiv.classList.remove("header-sticky");
                }
            }

            // Add scroll event listener to toggle sticky header
            window.addEventListener("scroll", toggleStickyHeader);
        });
    </script>

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

Klaw2OC · ‎01-29-2024

The header is not sticky now.

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

Could I send a collaborator request access to your store so I can check and help you with this?

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

Klaw2OC · ‎01-29-2024

No problem

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

Give me your Collaborator request code.

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

Klaw2OC · ‎01-29-2024

0130

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

Request sent

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

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

Hi, It's done. Could you check if it is ok now?

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

Klaw2OC · ‎01-29-2024

Exactly the way I want! Thank you

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

Happy I could help 😁

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

nour1547 · ‎03-01-2024

Hi, do you have the code for the transparent en sticky header? but it have to be white when scrolling.

D7Swim · ‎10-09-2024

Hi. I also need the sticky header fixed for Emerge theme. Can you do?

Dan-From-Ryviu · ‎10-09-2024

HI @D7Swim Could you share your store URL?

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

D7Swim · ‎10-10-2024

swimcommercial.com

Dan-From-Ryviu · ‎10-10-2024

Hi @D7Swim

Do you want the header fixed at the top like this?

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

D7Swim · ‎10-11-2024

yes fixed sticky header on all devices. currently it only sticks on my
iphone 12

Dan-From-Ryviu · ‎10-11-2024

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.header--root { position: fixed !important; width: 100%; }

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

D7Swim · ‎10-12-2024

Thanks.

Also the parallax images in Emerge theme work on iPad and desktop but not
on iPhone (they remain stacked). Can that be fixed?

Emerge theme: transparent and sticky header

Emerge theme: transparent and sticky header

Community Blog Articles