header behavior

[Artez]

Hi,

I set the header so it can redirect to each part of the home page,

currently working well.

The small problem occur when i move to other page from "Services".

when I pick one of my services, and inside the page, clicking on the header wont send me anywhere.

Is it possible to redirect to the home page to the exact section selected? (same behavior as homepage)

Warm regards.

https://wmqgez-r2.myshopify.com/

1. first pick a service from home page

2.Then try to use the header's subjects.

[BiDeal-Discount]

Hi @Artez 

I think we need to modify the previous js code to cover case other pages.

If customer at other page, we will redirect them to home page then scroll to exactly that section

[BiDeal-Discount]

Hi @Artez 

can you try to replace the old code with this one:

<script>
  const currentPathname = window.location.pathname;
  document.getElementById('HeaderMenu-contact-me').addEventListener('click', function (e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__contact_form_KVKcFb';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__contact_form_KVKcFb');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });

  document.getElementById('HeaderMenu-about').addEventListener('click', function(e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__image_with_text_apWqkm';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__image_with_text_apWqkm');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });
</script>

[Artez]

Wow it work well for  "about" and "contact me" the only two left to take care of are "services" and "clients".

Would be amazing if you succeed dear friend.

Warm regards.

[BiDeal-Discount]

That sounds great.

Let remove the old JS code with this one. All with only this one:

<script>
  const currentPathname = window.location.pathname;
  document.getElementById('HeaderMenu-contact-me').addEventListener('click', function (e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__contact_form_KVKcFb';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__contact_form_KVKcFb');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });

  document.getElementById('HeaderMenu-about').addEventListener('click', function(e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__image_with_text_apWqkm';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__image_with_text_apWqkm');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });


  document.getElementById('HeaderMenu-clients').addEventListener('click', function (e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__1748775918884a9c9b';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__1748775918884a9c9b');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });

document.getElementById('HeaderMenu-services').addEventListener('click', function (e) {
    e.preventDefault();
    if (currentPathname != '/'){
      window.location.href = '/#shopify-section-template--18541339115701__collection_list_TJVYQQ';
      return true;
    }
    const target = document.querySelector('#shopify-section-template--18541339115701__collection_list_TJVYQQ');
    const offset = 100; // scroll 100px before the element, adjust as needed
    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

    window.scrollTo({
      top: top,
      behavior: 'smooth'
    });
  });

</script>

[Artez]

So close dear friend, it redirect correctly,

one question:

Is it possible to redirect to the top of each topic, it look like it cut the words Client, and also the same about "about", when redirected from the precious page, it redirect correctly but cut the titles, thank you very much 🙌

[BiDeal-Discount · Accepted solution]

Actually it was scroll to exactly section with id corresponding, the reason of cut off text is because your header sticky have height is 73px so that over the text.

Let try to add this JS code to whether it can handle the issue for you:

<script>
  const hash = window.location.hash;

  if (hash) {
    setTimeout(() => {
      const target = document.querySelector(hash);
      if (target) {
        const offset = 73;
        const top = target.getBoundingClientRect().top + window.pageYOffset - offset;

        window.scrollTo({
          top,
          behavior: 'smooth'
        });
      }
    }, 100);
  }
</script>

[Artez]

You rock Dear friend! working amazing!

[BiDeal-Discount]

You're welcome 😋