Sticky navbar that chnages options depending on width HTML - html

Question

I am new to HTML and am about to complete my first website, however, I am stuck on the formatting of my navbar at different page widths.
I successfully managed to have a navbar with full options at max width, a drop down menu button below a certain width (1045px) and a sticky navbar when above 1045px with all options.
However, when the navbar is smaller than 1045px, the menu doesn't keep the same formatting and won't open to show drop down options. It also is permanently locked in the top left of the screen no matter the width.
Can someone please help fix my issue or provide guidance. The links provided are the resources I used to create this:
https://www.w3schools.com/howto/howto_css_dropdown.asp
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
These are also some minor issues I wanted to fix as well:
The options below 'Menu' option are left aligned to the button, Ii
would prefer it to be centred
When clicking the options in the full sized navbar, the back-ground colour changes even though I haven't programmed for this and would like the background colour not to change
Thank you for any help you can provide
EDIT:
I managed to fix the navbar formatting so it now says just menu when below 1045px, but when you hover or click on menu, the list for it doesn't show beneath; I instead noticed the list appeared on the right of all the other options when expanding the width beyond 1045px, with incorrect font-colour.
HTML:
<div id="navbar" class="sitcky">
<a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
<a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
<a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
<a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
<a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
<a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
<a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
<a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
</div>
</div>
<!-- Script to keep navbar sticky when scrolled -->
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
CSS:
#navbar {
background-color: rgb(0, 25, 50);
display: block;
width: auto;
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
z-index: 10;
}
#navbar a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
#navbar a:hover{
color: rgb(255, 192, 0);
}
#s_navbar {
background-color: rgb(0, 25, 50);
display: block;
width: auto;
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
z-index: 10;
}
#s_navbar a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
#s_navbar a:hover{
color: rgb(255, 192, 0);
}
#media (max-width: 1045px) {
#navbar a{display: none;}
}
#media (min-width: 1045px) {
.dropbtn {display:none;}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: rgb(0, 25, 50);
color: whitesmoke;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
color: rgb(255, 192, 0);
}
.sticky {
position: fixed;
top: 0;
left:0;
right:0;
width:max-content;
}
.sticky + .main {
padding-top: 60px;
}