header problem

Topic summary

A user encountered an issue where header navigation buttons worked correctly in edit mode but failed to scroll to the correct page sections on other devices. Specifically, the “About” and “Contact Me” buttons were not functioning.

Initial diagnosis:

  • Multiple users identified that menu links were missing the “#” symbol before section IDs
  • One user suggested using full Shopify section IDs (e.g., #shopify-section-template--18541339115701__contact_form_KVKcFb)

Attempted fixes:

  • Adding “#” to menu links did not resolve the issue
  • The user struggled to locate where to properly configure the section IDs

Solution:
BiDeal-Discount provided custom JavaScript code to insert into header.liquid, which successfully fixed the scrolling behavior across all devices.

Outcome:
The issue was resolved. The original poster offered to support BiDeal-Discount, who shared a “buy me a coffee” link and suggested installing their Shopify app for bundle discounts, though the user noted it wasn’t relevant for their service-based business.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.

Hi I encounter a small problem,

here in the edit mode my header works well, when I click on each one of the button

it scroll down to the exact place in the page.

but when I try on other laptops some button does not work and does not scroll down to the place wanted,

how do i repair it please?

“about” and “contact me” does not scroll down

https://wmqgez-r2.myshopify.com/?pb=0

Thank you for the help, warm regards!

@Artez Can you please share this page link?

sure:

https://wmqgez-r2.myshopify.com/?pb=0

@Artez in menu you have added the id names like HeaderMenu-about , but no # added, so it should be #HeaderMenu-about and it will work

Hi,
The issue is that in the menu, the links are not using the correct section IDs.

For example:

  • The “Contact Me” link should point to this ID:
    #shopify-section-template–18541339115701__contact_form_KVKcFb

  • For the “About Me” section, make sure the link matches the actual id of that section (you can inspect it in the browser).

Once you update your menu links to use the exact section IDs, the scroll should work properly.

If this helps, please like or mark as solved
— Bharat Theme

Added # in the menu still not working correctly.

Done still don’t work.

@BiDeal-Discount

Hey dear friend, sorry to tag you in, but maybe you have the solution please?

I also tried in the menu still wont work.

Warm regards.

@Artez - you added in link and not in id, please check where you have ids for menu items

I don’t know how to check an idea from the page

Hi @Artez

can you try to replace the 2 (about & contact me) with this code in header.liquid:


1 Like

I knew you were the best!

works on every laptop. How can I contribute to you dear friend?

1 Like

That sounds great.

You can buy me a coffe :rofl: or install my Shopify app BiDeal Bundle Volume Discounts , This app will support you create the bundle discounts & boots sales with Free shipping + Free gift with purchase on cart progress bar, otherwise you can use mix & match feature.

Btw, let me know if you need any other assistance. I always here to ready support you.

1 Like

you don’t have the buy me a coffee on your signature, do you have a link ?

1 Like

Haha this is my Buy me a coffee link https://buymeacoffee.com/huykon225

It will better if you can install my app & leave me a good review :heart_eyes:

1 Like

Done!

about the app, I don’t see how it can help me yet, since I want to promote services and not sale.

1 Like

Thank you very much for the tips

1 Like