I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I noticed that the navigation bar had suddenly stopped working (without any code changes). I've looked through the code multiple times but couldn't pinpoint why it broke. Any thoughts or suggestions?
Here is an older image of the website with the functioning right-hand navigation bar. The bar used to change color while scrolling and always stayed on the right side of the page (floated).
Edit: This is how the broken right bar currently looks (aligned along the top of the screen without floating or scrolling)
Edit 2: Upon further inspection, I found that everything works fine in Microsoft Edge and Internet Explorer 10, but there seems to be an issue in Google Chrome (I couldn't test other browsers).
Stylesheet Code
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: contents;
right: 0;
}
.rightjumplist {
display: block;
background-color: greenyellow;
padding: 8px 8px;
text-decoration: none;
color: black;
text-align: center;
border-bottom: 1px solid black;
border-radius: 5px 40px 5px 40px;
}
.rightjumplist:hover {
background-color: lightgray;
color: black;
}
.activelist.active {
background-color: forestgreen;
color: black;
}
Main HTML Code:
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="images/logo-small.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<!--#Floating verticle contents bar-->
<nav>
<ul class="leftcontents">
<li class="leftcontentslist" style="background-color: lightgray"><img src=images/logo-large.png width="155px" height="155px"></li>
<li class="leftcontentslist"><a id="a01" href="home.html">Home</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon1.html">New Horizon 1</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon2.html">New Horizon 2</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon3.html">New Horizon 3</a></li>
<li class="leftcontentslist"><a id="a01" href="try1.html">We Try 1</a></li>
<li class="leftcontentslist"><a id="a01" href="try2.html">We Try 2</a></li>
<li class="leftcontentslist"><a id="a01" href="can1.html">We Can 1</a></li>
<li class="leftcontentslist"><a id="a01" href="can2.html">We Can 2</a></li>
</ul>
</nav>
<!--#Floating verticle jump bar (right)-->
<nav class="navbar navbar-inverse" id="myScrollspy">
<ul id="navbar" class="rightjump nav nav-pills nav-stacked">
<li class="active activelist rightjumplist"><a id="a01" href="#Top">Top</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Bingo">Bingo</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Wordsearch">Wordsearch</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF1">Activity</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF2">Activity 2</a></li>
</ul>
</nav>
</html>
If there are any inaccuracies, please forgive me as this is my first time posting here. Thank you for your assistance! ^^