startbootstrap-scrolling-nav | unstyled Bootstrap HTML template for creating smooth | Theme library

So I am trying to use the smooth scrolling animation used in this template:

https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

After adding the js files to my directory, including the basic JQuery files, I've seen the custom .js file that adds the scrolling uses the .class parameter in an anchor tag to detect if clicking it should trigger the smoothscrolling. So I added those to my anchor tags.

Below is the relevant code.

I will include a live preview too.

I am trying to integrate datatables api into my website and I am getting the error message: "TypeError: $(...).DataTable is not a function"

I am using datatables code from the following website: https://datatables.net/examples/api/multi_filter_select.html

I am using bootstrap template code from the following website: https://github.com/BlackrockDigital/startbootstrap-scrolling-nav

If I use datatables without startbootstrap-scrolling-nav then it working, but if I put the datatables code inside startbootstrap-scrolling-nav as below then I am getting the type error.

I realize this is a duplicate of this question, but the answer given there isn't using the scrollspy plug in but is instead writing out all of the javascript to highlight active links on scroll.

I've gone through pretty much all other iterations of this question that I could find but my code looks the same as in the solutions given so I'm not sure of the problem. (most other questions are also not for bootstrap 4 beta but rather earlier versions)

I'm using the javascript file from this scrolling nav template to scroll down to a section when you click a link. This works, so the links are all connected to the sections by their ID's properly.

The template's JS file has the JS to activate scrollspy built in, but it's not working for me.

The body's position is set as relative. The jQuery.js file is placed before the before the bootstrap.js file.

I've also tried the method of applying the data-spy and data-target to the body tag.

I have styled the .active class but before and after doing this, I've inspected my page in chrome, and the .active class is not being applied to the links as you scroll so I don't think the problem is related to CSS.

Here is the javascript:

I am trying to stop the div when it reaches 50px from the top. It works while I made the change on scrollTop: $($anchor.attr('href')).offset().top - 50 but the active state on navigation doesn't change. It only change if I scroll that 50px too. Please help.

I am using this template

Bootstrap scroll navigation changes the active state only when it reaches top of the screen. I need it to be changed when it reaches 100px from the top.

When I click on navigation it stops before 100px which is correct but the active state doesn't change.

I am trying to center a sentance in my Nav Bar (which uses bootstrap). The navbar so far looks like this:
Centered Navbar title
What I would like to do is have the "|" centered, with the text around it next to it, instead of just having the sentence centered. This is quite hard to explain, but I hope you understand what I mean - the "|" is centered, with text to the left and right, instead of the whole sentance being centered, where the middle letter is in the middle. I want the "|" to be in the middle.
I have tried centering the "|" and floating the text on the left to the right and the text to the right to the left, but that just made the text go completely to the right instead of stopping before the "|".
Use the snippet to view the code, but please use "Full Page" so it works properly...