How do I link menu to certain section in one page theme?

What is the path should I add if "about" menu link to "about" section?

enter image description here

enter image description here

The single page is combination of different blocks.

  • How that about section was made. Is it block?, Is it panel section? or Is it simple Node? or something else? Looking at it looks like it is a Node, right? – CodeNext Oct 12 '16 at 3:17
  • No, the front page is combination of blocks. The menu has to link to about block. @CodeNext – JJ12345 Oct 12 '16 at 3:45
  • One quick question, are you using D7 or D8? I have sure answer for D7, for D8 I have to do some trials. – CodeNext Oct 12 '16 at 4:05
  • D7. Sorry, I forget to clarify in question. – JJ12345 Oct 12 '16 at 5:48
  • I guessed by your screen-shot, and answer is for D7 itself...:) – CodeNext Oct 12 '16 at 5:49

You can do this by giving path of your menu to id of that block. BUT there is a problem, Default Menu path in Drupal will show you invalid entry as ID of the block are not real path so it is not allowed.

To solve this Void Menu module comes in picture,

Follow following steps:

  1. Download and enable the Void menu module.
  2. Get your block-id by inspecting the HTML.

    enter image description here

  3. Go to Modules/Void menu/Configuration, in the section of <void1> save the Id of that block e.g. I have a id="block-block-4", so I will paste #block-block-4 and save it.

    enter image description here

  4. Go to Structures/Menus/Your menu/About link, In the path just paste <void1>, save it.

    enter image description here

  5. Now, you are good to go, when you will click that about menu link it will scroll you down to that block on same page.

Note: In Drupal-8, You do not have to do anything, just save the Id in path, and that's it. This feature is provided by default in Drupal-8.


Till above procedure it is just fine, you can go ahead with that. BUT if you want the Smooth JQUERY effect like whatever is provided in your example website.

Just download Scroll to destination anchors, enabled it, That's it. Now it will Scroll down with smooth Jquery Effect.

  • Can I use class? What should I add in if the class name is featured_section11? Just simply put ".featured_section11"? – JJ12345 Oct 20 '16 at 6:13
  • @JJ12345 I guess, you cannot use class, as requires some unique thing to address, ID is unique as it cannot be used at two places. Class can be used as many times as you can think of. And class can be at any other place on the same page. So, these all are reasons to use ID, and block has been given a specific ID for making it unique, so we can address, precisely that one. – CodeNext Oct 20 '16 at 6:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.