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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024