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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024