{"id":684,"date":"2018-10-22T08:08:43","date_gmt":"2018-10-22T08:08:43","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=684"},"modified":"2019-01-19T18:13:05","modified_gmt":"2019-01-19T18:13:05","slug":"how-to-implement-inner-scroll-navigation","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-implement-inner-scroll-navigation\/","title":{"rendered":"How to implement inner scroll navigation (one page menu)"},"content":{"rendered":"<p>In case if you need\u00a0to implement inner scroll navigation follow these steps:<\/p>\n<ol>\n<li>Create or modify existing <strong>Navigation menu<\/strong> by adding a custom link. <strong>URL must begin with #<\/strong>\u00a0(hash) sign<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-685\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-10-51-48.jpg\" alt=\"\" width=\"1271\" height=\"754\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-10-51-48.jpg 1271w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-10-51-48-300x178.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-10-51-48-768x456.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-10-51-48-1024x607.jpg 1024w\" sizes=\"(max-width: 1271px) 100vw, 1271px\" \/><\/li>\n<li>Go to the page where you want to implement inner scroll functionality and set ID to rows where you need to school. The ID must be the same as URL of Custom link but <strong>without # (hash) sign<\/strong><br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-686\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-02-20.jpg\" alt=\"\" width=\"1585\" height=\"801\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-02-20.jpg 1585w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-02-20-300x152.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-02-20-768x388.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-02-20-1024x517.jpg 1024w\" sizes=\"(max-width: 1585px) 100vw, 1585px\" \/><\/li>\n<li>Make sure that the Navigation menu on the page is set to the same that we modified for Inner scroll navigation. In our example case, it is &#8220;Single page menu&#8221;<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-687\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-07-19.jpg\" alt=\"\" width=\"1108\" height=\"986\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-07-19.jpg 1108w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-07-19-300x267.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-07-19-768x683.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2018\/10\/screenshot-crane.local-2018.10.22-11-07-19-1024x911.jpg 1024w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" \/><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>In case if you need\u00a0to implement inner scroll navigation follow these steps: Create or modify existing Navigation menu by adding &hellip; <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-implement-inner-scroll-navigation\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":682,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/684"}],"collection":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/comments?post=684"}],"version-history":[{"count":0,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/684\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/682"}],"wp:attachment":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/media?parent=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}