Narrative Theme Menu Anchor Links on Home Page

Charlie1029
Tourist
5 0 3

Hello, this is my first post, and I have minimal knowledge of HTML, so please bear with me.

The website that I am modifying is irisaudiodesign.com for reference.

Im using the Narrative theme, and Im trying to use the main navigation menu to navigate to different sections on the home page. I have tried using the inspector to find the "div id" value, and using the "/#div id" as the link for the menu item, as in https://community.shopify.com/c/Shopify-Design/Where-to-add-anchor-links-code-in-Narrative-theme/td-...  I have also tried inserting custom HTML using the "Custom content>Custom HTML" section and inserting <div id="about"></div> (where "about" is the section that I am trying to get to, as in https://community.shopify.com/c/Shopify-Design/Anchor-links-in-Narrative-theme/td-p/947109 .

Here's the interesting part. When I click the item that I want to navigate to in the Navigation pane, the https://irisaudiodesign.com/#shopify-section-16257915044f8d86b6  shows up in the browser bar. If I refresh the page, it goes exactly where i want it ti ("About" section), but it doesn't go there when I click on the navigation menu item on the website.

Furthermore, Id like to have a prettier URL (such as .../#about), but using the "custom HTML" option seems to be less reliable (sometimes scrolls down to the bottom of the page), and requires that I have a blank space between home page sections, which I dont like.

Any help would be greatly appreciated!

KetanKumar
Shopify Partner
20599 2134 7800

@Charlie1029 

sorry for that issue do you have like this?

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Charlie1029
Tourist
5 0 3

@KetanKumar Thank you for your response! Im not sure that I understand what you mean. I am using the Narrative theme in Shopify, with no modified code. I went "Online store>Navigation>Main menu>Edit menu item" then used the shopify section that I wanted to scroll to (/#shopify-section-16257915044f8d86b6). Pasting irisaudiodesign.com/#shopify-section-16257915044f8d86b6 brings me to where I want to scroll to, but selecting the button on the website does not.

KetanKumar
Shopify Partner
20599 2134 7800

@Charlie1029 

thanks for update please add above step code and after add link on navigation 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Charlie1029
Tourist
5 0 3

Where should I add the above code? In the "Edit code for Narrative" section? If so, what file should the code be implemented on, and where?

KetanKumar
Shopify Partner
20599 2134 7800

@Charlie1029 

yes your have try this code add theme.liquid file before </body>

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Charlie1029
Tourist
5 0 3

@KetanKumar Thank you for your ongoing help with this matter. I placed the code that I believe you recommended 

html {
  scroll-behavior: smooth;
}

immediately before the </body> section of the "theme.liquid" file under "Edit code for Narrative". This did not appear to work at all, and the website has the same issue of not responding when I click the navigation bar item.

0 Likes
Charlie1029
Tourist
5 0 3

Just to reiterate, if I use the Navigation bar from any other page on the website (other than the home page), it goes to the exact point of the home page that I am looking for (behaves as expected). This issue only occurs when the navigation is used on the home page.

0 Likes