Fixed the mobile menu not working well

pull/3/head
Maik de Kruif 6 years ago
parent 3635b51965
commit 8367f71388
  1. 12
      index.html
  2. 4
      styles.css

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<div class="content"> <div id="content" class="content">
<div id="top"></div> <div id="top"></div>
<nav> <nav>
<div id="mobile_menu" class="mobile_menu dropdown-content dropbtn hidden"> <div id="mobile_menu" class="mobile_menu dropdown-content dropbtn hidden">
@ -146,6 +146,7 @@
document.getElementById("mobile_menu").classList.toggle("hidden"); document.getElementById("mobile_menu").classList.toggle("hidden");
document.getElementById("open_mobile_nav").classList.toggle("hidden"); document.getElementById("open_mobile_nav").classList.toggle("hidden");
document.getElementById("close_mobile_nav").classList.toggle("hidden"); document.getElementById("close_mobile_nav").classList.toggle("hidden");
document.getElementById("content").classList.toggle("nocroll");
}; };
function close_menus() { function close_menus() {
@ -156,7 +157,14 @@
if (!openDropdown.classList.contains('hidden')) { if (!openDropdown.classList.contains('hidden')) {
openDropdown.classList.add('hidden'); openDropdown.classList.add('hidden');
} }
} };
if (document.getElementById("content").classList.contains('nocroll')) {
document.getElementById("content").classList.remove('nocroll');
};
if (document.getElementById("open_mobile_nav").classList.contains('hidden')) {
document.getElementById("open_mobile_nav").classList.remove('hidden');
document.getElementById("close_mobile_nav").classList.add('hidden');
};
}; };
window.onclick = function(event) { window.onclick = function(event) {

@ -98,6 +98,10 @@ body {
display: none !important; display: none !important;
} }
.nocroll {
overflow: hidden !important;
}
.content { .content {
display: grid; display: grid;
grid-template-rows: auto; grid-template-rows: auto;

Loading…
Cancel
Save