I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS media queries by setting their font-size to zero. When the menu icon is clicked, a JavaScript function is triggered to adjust the font size of the links accordingly.
Everything seems to be working smoothly with this setup, except for one issue. Upon resizing the browser window after the font sizes of the links have been altered by the script, those changes persist and do not revert back to the original values defined in the media query. This results in either extremely large or invisible fonts depending on whether the mobile menu was open or closed. Why aren't these font size values being reset when resizing the browser back to full-screen?
Here is a code snippet that includes the necessary code to replicate the scenario:
var open = false;
function openmobilemenu() {
var nav = document.getElementsByTagName("nav");
var links = nav[0].getElementsByTagName("li");
if (!open) {
for (var i = 0; i < links.length; i++) {
links[i].style.transition = "0.5s";
links[i].style.fontSize = "10vw";
}
open = true;
}
else {
for (var i = 0; i < links.length; i++) {
links[i].style.fontSize = "0";
}
open = false;
}
}header {
position: relative;
width: 100%;
height: 200px;
background-image: url("../img/header.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #CDCCCA;
}
header img {
position: absolute;
width: 500px;
padding: 0 15%;
bottom: 10px;
}
.mobilemenu {
display: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
transition: none;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
@media screen and (max-width: 800px), (hover:none) {
.mobilemenu {
display: flex;
color: #61625B;
font-size: 100px;
margin: auto 5%;
}
.mobilemenu a, a:hover, a:active {
text-decoration: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
min-height: 10px;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative;
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 0;
height: auto;
}
nav li:hover {
background-color: #8b131f;
}
.navunderline {
display: none;
} <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<a href="index.html"><img src="img/logo.png" alt="some alt" /></a>
<a href="javascript:void(0);" class="mobilemenu" onclick="openmobilemenu()">
<i class="fa fa-bars"></i>
</a>
</header>
<nav>
<ul>
<li><a href="content/unternehmen.html">Unternehmen</a><div class="navunderline"></div></li>
<li><a href="content/leistungen.html">Leistungen</a><div class="navunderline"></div></li>
<li><a href="content/referenzen.html">Referenzen</a><div class="navunderline"></div></li>
<li><a href="content/news.html">News</a><div class="navunderline"></div></li>
<li><a href="content/kontakt.html">Kontakt</a><div class="navunderline"></div></li>
</ul>
</nav>