Streaming live at 10am (PST)

Adding navigation to dynamic page


#1

https://preview.webflow.com/preview/beaufort-12?preview=25ef7d878eea2c7be62ed2dc9b0e0747

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) https://getbootstrap.com/docs/3.3/getting-started/

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

<script>
function generateIdBasedOnTitle(titletoconvert) {
  return titletoconvert
    .toLowerCase().trim()
    .split(' ').join('-')
    .split(':').join('-')
    .split('.').join('-')
		.split(',').join('-')
    .split('--').join('-')
    .split('—').join('-')
    .split('---').join('-');
}

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

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!

Thanks


#2

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?


#3

@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:‍♂️


#4

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 http://beaufort-12.webflow.io/basics/quo-voluptates-sint/#test-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!

Thanks


#5

@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.

CloudApp


#6

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