Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Dear Shopifiers,
After some trail and error we've managed to have some of the items in the main navigation menu link to a destination section down/up on the home page. We did this by adding the following under "Link" for the specific main navigation menu item: "https://domainname.com/#shopify-section-template--13454....." .
This works, but after the scrolling action the destionation section shows all the way on top of the page. However, we would prefer there to be some space above the destination section or have them vertically centered on the page.
To give a concrete example with pictures: we have in our main menu a menu item called "Over Ons". Currently, when the user clicks the item the destination section shows all the way up top after the scrolling action is completed (image 1). Instead, we would like there to be some space above the destination section (image 2) and ideally we would like the destination section to be vertically centered on the page.
Anyone knows how to do this? We're using the Kingdom theme for our website.
Thanks in advance,
Roekudoo
Image 1
Image 2
Hello @roekudoo
That is the default browser behavior, after scrolling it always scroll to the top of the target section. There is no way to change it.
There is a hack: You can set ID for a section ABOVE your target section, and scroll to it instead. It is the easiest way to do without any JavaScript.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024