Streaming live at 10am (PST)

Adding navigation to dynamic page


I would like to add a static navigation menu to a page with dynamic content that allows you to jump to content on that page ie. (the right hand side of this page)

I have been told that I need to add this script to the template page:-

function generateIdBasedOnTitle(titletoconvert) {
  return titletoconvert
    .split(' ').join('-')

$('.contentwrapper > div > h2,h3,h4,h5').each(function() {
  $(this).attr('id', generateIdBasedOnTitle($(this).text()));

However, I’m rather stumped on where to go from here. All content is in a single Rich text field. Presumably, that script means each header will be given its own auto generated id. I don’t know what that id would be or what fields to add to the collection so that navigation links can be created to these id’s.

Any help would be much appreciated!



I wondered if anyone can tell me how to find out what the auto generated id for each title might be so I can link to it?


@sparky great question!

That script above will essentially create an ID on every heading (H1, H2, H3, H4, H5) within a div or section element with a parent class of contentwrapper.

So say now you have a heading of: “This Is a Heading for a Section

The script above would add an ID of: “this-is-a-heading-for-a-section” to that heading and you can then start linking to that ID via a link element.

I hope that this is helpful :bowing_man:‍♂️


Thanks so much @Waldo.

I have added a class of contentwrapper to a div on the template page (Basics template). The rich text field is within that. I have added an H2 header, ‘Test Header’ to one of the posts along with a field that has a link to that post and the id for that header However, when I go that page and click the link, nothing happens.

If you can let me know what I’ve missed that would a huge help!



@sparky super close to having this work! Great job!

If you just take the script and move it to the before closing </body> tag then those ID’s will be put in place and you can link to respective sections.



Genius! This worked. Thanks so much @waldo! Really appreciate it.