Issue with CSS and JavaScript menu

Question

So I'm coding a website for school. I have coded a side menu that has options that you click. And I've also coded some of those things that you click. My problem, is even though they exist, it says "filler.html does not exist." when I click. Even though they exist. So, here's my code. If you have any further questions, ask away.

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } 

 body { font-family: "Lato", sans-serif; } .ABox { background-color: black; color: lightgrey; width: auto; padding: 1%; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; } .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } 

 <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <br> <a href="/StoryTime.html">The beginning of logic and rhetoric</a> <a href="/rhetoric.html">What is rhetoric?</a> <a href="/classics.html">What is classics?</a> <a href="/timeline.html" Timeline</a> </div> <div class="ABox"> <h2>Classics and Rhetoric</h2> </div> <p style="background-color:black;color:lightgrey;width:200px;padding:1%;"></p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> 

Answer 1

Try removing the leading "/". This means absolute directories, when you want relative.

<a href="StoryTime.html">The beginning of logic and rhetoric</a>
<a href="rhetoric.html">What is rhetoric?</a>
<a href="classics.html">What is classics?</a>
<a href="timeline.html">Timeline</a>

Answer 2

Replace:

From:

<a href="/timeline.html" Timeline</a>

To:

<a href="/timeline.html"> Timeline</a>