I've got a problem with my hamburger menu and its scorll bar that are not working properly together. I'm not able to scroll to the bottom of the hamburger menu anymore when the window height gets below a certain amount of pixels. Have a look at my code:
CSS
.fill {
color: grey;
height: 8000px;
}
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
color: #605b41;
}
li {
list-style: none;
}
nav {
z-index: 500;
background-color: #fff;
position: fixed;
width: 100%;
max-height: 220px;
}
.navigation-bar-top-mobile {
background: white;
width: 100%;
color: #0E8DBD;
color: white;
box-shadow: 0 8px 6px -6px grey;
overflow: auto;
}
.navigation-bar-top a {
text-decoration: none;
color: #0E8DBD;
}
header,nav, img, li{
transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
}
header.large{
height: 0px;
}
header.large img {
width: 237px; height: 120px;
}
header.small {
height: 50px;
}
header.small img{
width: 170px; height: 90px; margin-top: -10px;
}
.left {
float: left;
padding-left: 50px;
padding-bottom: 10px;
}
.right {
float: right;
}
.newboxes {
display: none;
padding-top: 10px;
}
.dropdown-hamburger {
width: 100%;
padding-left: 55px;
padding-right: 55px;
padding-bottom: 30px;
max-height: 400px;
overflow-x: hidden;
}
.dropdown-hamburger span {
color: #3176bb;
display: block;
padding: 5px 0;
}
.dropdown-hamburger hr {
border-color: #3176bb;
margin: 10px 0;
}
.dropdown-hamburger-content {
padding-top: 140px;
overflow-x: hidden;
width: 100%;
}
.dropdown-hamburger-content-style span {
font-size: 17px;
padding-left: 20px;
}
.mobile-nav {
display: inline;
font-size: 20px;
color: red;
}
/*media*/
@media all and (max-width: 1000px) {
.navigation-bar-top ul {
display: none;
}
}
@media all and (max-width: 1000px) {
.desktop-nav {
display: none;
}
}
@media all and (min-width: 1001px) {
.mobile-nav {
display: none;
}
}
JS
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).toggle();
}
else {
$(this).hide();
}
});
}
$( document ).ready(function() {
$( ".dropdown-hamburger-content" ).hide();
$( ".right" ).click(function() {
$( ".hamburger" ).toggle( function() {
});
});
$( ".right" ).click(function() {
$( ".dropdown-hamburger-content" ).toggle( function() {
$( ".dropdown-hamburger" ).show();
});
});
});
/*-----*/
/*image resize top nav */
$(document).on("scroll",function(){
if($(document).scrollTop()>20){
$("header").removeClass("large").addClass("small");
} else{
$("header").removeClass("small").addClass("large");
}
});
/*-----*/
$(document).ready(function(){
$(".burger-nav").on("click", function(){
$("burger-nav ul").toggleClass("open");
})
});
HTML
<nav>
<header class=“large”>
<div class="navigation-bar-top-mobile ">
<div class="mobile-nav">
<br>
<div class="images">
<div class="left"><a href="#"><img class="logo" src="images/logo.png"></a></div>
<div class="right"><a><img src="https://imgur.com/a/3ov6t"></a></div>
<div class="dropdown-hamburger">
<div class="dropdown-hamburger-content">
<a id="" href="javascript:showonlyone('newboxes5');"><span>Placeholder1</span></a>
<div class="newboxes" id="newboxes5">
<div class="dropdown-hamburger-content-style">
<hr>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
</div>
</div>
<hr>
<a id="" href="javascript:showonlyone('newboxes6');"><span>Placeholder2</span></a>
<div class="newboxes" id="newboxes6">
<div class="dropdown-hamburger-content-style">
<hr>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
</div>
</div>
<hr>
<a id="" href="javascript:showonlyone('newboxes7');"><span>Placeholder3</span></a>
<div class="newboxes" id="newboxes7">
<div class="dropdown-hamburger-content-style">
<hr>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
</div>
</div>
<hr>
<a id="" href="javascript:showonlyone('newboxes8');"><span>Placeholder4</span></a>
<div class="newboxes" id="newboxes8">
<div class="dropdown-hamburger-content-style">
<hr>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
<a href="#"><span>Placeholder</a></span>
</div>
</div>
<hr>
<a href="#"><span>Placeholder5</span></a>
<hr>
</div>
</div>
</div>
</nav>
Resize your browser in order to view the tablet navigation bar. Then click on the top right corner to open the hamburger menu. That's where the issue is at. I've also included some code that should have nothing to do with the problem I'm having, but it's there for just in case.
Thank you for your time.