Header transparent and position header banner on mobile

Shopify Discussion
1

Hi I have 2 issue, issue 1 :

I have code my header transparent and visible only on scroll up on my theme.liquid it worked perfect for my home page but the problem is that it didn’t applied to all my pages, i checked and it’s not normal it should have applied to all the page following how shopify code work so i would like to know if there is another way to code that ? That’s the code that i had for it. I tried to contact shopify but they didn’t understand and asked me to talk to a shopify expert so here we are.

document.addEventListener("DOMContentLoaded", function() {
            let lastScrollTop = 0;
            const header = document.querySelector(".header-wrapper");

            window.addEventListener("scroll", function() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                if (scrollTop === 0) {
                    // At the top of the page
                    header.classList.remove("scrolled-up", "scrolled-down");
                } else if (scrollTop > lastScrollTop) {
                    // Scrolling down
                    header.classList.remove("scrolled-up");
                    header.classList.add("scrolled-down");
                } else {
                    // Scrolling up
                    header.classList.remove("scrolled-down");
                    header.classList.add("scrolled-up");
                }

                lastScrollTop = scrollTop;
            });
        });


    {%- if settings.predictive_search_enabled -%}
      
    {%- endif -%}
    {% if template == 'index' %}
 

 
{% endif %}

Now my second issue, I would like to change the position of my heading on my banner but only on phone version i gonna try to code it today myself but in case if one of you know the answer it will more easy haha here is my shopify url : https://supremeautosource.com/ Thank you for your help !

2

Hi @SAS-PARTS You have applied the condition {% if template == ‘index’ %} , that’s why style is working for homepage only. Remove {% if template == ‘index’ %} and {% endif %} then the transparent header work on all the pages.


    {%- if settings.predictive_search_enabled -%}
      
    {%- endif -%}

To check the second issue please provide password of your store and also let me know where do you want to place the text.

3

Hi @SAS-PARTS

If I understand, you are trying to make your header sticky when scrolling up only, and Dawn theme has a default function as your request without adding any code

Screenshot_3.jpg
Screenshot_3.jpg1918×851 117 KB

4

No haha it wasn’t that but thank you priyanka find the solution i just took off the 2 line of code that was indicated the index and it worked ! For the scroll up is more complicated that was shopify provide on the dawn theme my scroll op is full opaque on scroll up but 0 of opacity at the top of the pages but this solution has been resolved now thank you for your answer !

5

Thank you for your help i really appreciated ! It works perfect i just took off the index and endif, is it secure to sharing my password public like that ? or i can send you a message privately ?

6

@SAS-PARTS

You can share me password in message privately.

7

You must remove the customized code you added to make the default function of the Dawn theme work properly.

8

No cause if i take out my custom code then it doesn’t work, I coded everything yesterday for the header and for the phone version took me couple time to understand all the line and where i can place my code but it wasn’t to hard since it’s just CSS I didn’t have to used Java script for the mobile version but thank you !!!