We Keep Coding

I can't get scrollspy to work with my bootstrap navbar

I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.
I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.
Here is a fiddle:
https://jsfiddle.net/k8g3qydw/1/
I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0"
to the body tag and added the class .scrollspy to the parent element of my <ul> like so:
<div class="scrollspy board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="nav-item active">
So, I am pretty confused as to what to do!
Any help is much appreciated!

There are multiple mistakes in your code.
You should use one method to add Bootstrap ScrollSpy to your page, not both:
via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});
ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.
Navbar links should point to "resolvable id targets" instead of <a name="service">. You should use <a id="service">.
And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.
Here is a working JSFiddle

menu on only a single page

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you

From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.

Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki

There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application

So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/

a href external link to specific area on page

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>

if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS

You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.

As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>

Getting jquery mmenu to display in normal doc flow above 768px

I'm trying to get mmenu to display in normal document flow when above a certain screen width, and below that width display as it does out of the box. I came across an answer where "cloning" was mentioned, though I'm not sure what this entails (is it just duplicating the menu with a different ID?)... I have a project with a 15 page site that this would be perfect for, if I could get it working as I'd like! Any help would be greatly appreciated!
I've tried wrapping the function like so (my jQuery/javascript is most definitely not my strong suit!):
$(document).ready(function($) {
if($(window).width() < 768) {
$("#menu").mmenu();
}
});
HTML:
<nav id="menu">
<ul>
<li class="Selected">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</nav>

Creating a clone (and yes, changing its ID) gives you two NAVs with the same HTML inside it.
Fire the plugin on the first NAV and use CSS and media queries to show it in the mobile site. Again use CSS and media queries to hide it in the desktop site.
Vice versa use CSS and media queries to hide the first NAV in the mobile site and show it in the desktop site.
Note that the mmenu plugin has a build in option for cloning the menu that will automatically prepend all ID's in the menu with "mm-":
$("#menu").mmenu({
clone: true
});

One page responsive website with select menu that can move to anchor points

I've been working on a one page responsive website with a fixed header that stays at the top and it basically scrolls to different points depending on what you navigation button you click (it just a simple UL menu) now, when browser shrinks to a certain size I want it to switch to a select menu that you can just tap to scroll to the part of the page.
I can do all this easily I just can't get it to scroll to them through anchors.
I know that the way you do this is through js as I've been doing some reading on others with similar problems but the replies seem to be posted for some one who has a bit of knowledge in js. Which brings me to the problem, I'm pretty horrible with js :(. So would anyone be able to tell me what i need to do to make a select menu, scroll to an anchor on a page with js.
this is what I already have.
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
</ul>
<select>
<option value="" selected="selected">Navigation</option>
<option value="#home">Home</option>
<option value="#about">About</option>
<option value="#portfolio">Portfolio</option>
<option value="#services">Services</option>
</select>
if it helps at all, I'm using the skeleton boilerplate for my site.
Thanks in advance guys :)
(and I'm not sure I've seen different people saying the select menu needs to be in form tags and some saying it doesn't so if you could clarify that, it would be awesome :) )

I don't know if I'm understanding your problem right. The idea of an achor with a "#something" href is that when clicked it adds "#something" to your URL, called a fragment. This causes the browser to try and bring the element with id "something" to the top of the screen.
I'm sorry if this is not your problem - if it's not please clarify.