I'm trying to create a professional toggle event between a hamburger button and a ul element. On a desktop screen, the ul element is in a navigation bar and is horizontal (as intended); the hamburger button is not displayed (also as intended). Now when the screen reduces below a certain size, the ul element disappears and is replaced by a hamburger button (again, as intended). With JQuery, I click on the hamburger button and the hidden ul element is displayed, vertically (once again, as intended).
I am, however, getting two problems that I simply cannot resolve:
First, the vertical ul element is not pushing down the div contents below it, but instead, displaying behind the element even though the ul element has not been positioned relatively or absolutely. I want it to push the div element below it down. (Try this at the BBC website.)
Second, if I click the hamburger button and the ul element appears, and then resize the screen back to desktop size, the vertical ul element rearranges itself to a horizontal format and gets back into the navigation bar, which is good. But, if when the screen size is reduced, I click the hamburger button and the vertical ul element appears, and then I re-click the hamburger button and the vertical ul element disappears (which is as intended), when I resize the screen back to desktop size, the navigation bar is blank, and the ul element only reappears when I refresh the page. (The BBC website doesn't do that.)
Both of these problems make my website look very amateurish. Now I have spent the best part of two days on this, researched the Web, and I'm simply getting nowhere. I would value the insight of someone who knows more in this area than I do. I enclose a code snippet (which you can run—you will need to expand the result to a full page in order to see the second problem).
nav {
height: 2.2em;
width: 100%;
background-color: black;
}
#burger-button {
display: none;
}
#list-container ul {
list-style: none;
display: flex;
flex-flow: row wrap;
align-items: left;
justify-content: left;
}
@media screen and (max-width: 700px) {
#burger-button {
display: unset;
}
#list-container {
display: none;
margin-top: 0em;
text-align: left;
}
#list-container ul {
display: block;
margin-left: 1em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="CU">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta meta http-equiv="text/css; charset=utf-8">
<meta meta http-equiv="application/javascript; charset=utf-8">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav>
<div id="burger-button"><button id="hamburger">☰</button></div>
<div id="list-container" class="container-fluid">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
</nav>
<div>I want the emerging vertical ul to push this element down, which it is not currently doing (even though the ul element has not been positioned absolutely or relatively)</div>
<script>
$("#hamburger").click(function(){
$("#list-container").toggle();
});
</script>
</body>
</html>Below, I added code as per your requirement.
The first answer is you add the static height for the nav section parent element so the child element height is fixed to the parent so the link overlaps with the click-on toggle menu.
The second answer, the toggle() function, adds the display block, and none one by one by default menu shows in desktop first. When you resize the screen and click on the toggle button, add the display none in your link ul section, and after that you show the desktop view, the link was hidden.
nav {
width: 100%;
background-color: black;
}
#burger-button {
display: none;
}
.list-container.active {
display: block;
}
#list-container ul {
list-style: none;
display: flex;
align-items: center;
height: 100%;
margin: 0;
column-gap: 20px;
padding: 5px 0;
}
#list-container a {
color: white;
}
@media screen and (max-width: 700px) {
#burger-button {
display: block;
}
.list-container {
display: none;
margin-top: 0em;
text-align: left;
}
#list-container ul {
display: block;
margin-left: 1em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="CU">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta meta http-equiv="text/css; charset=utf-8">
<meta meta http-equiv="application/javascript; charset=utf-8">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav>
<div id="burger-button"><button id="hamburger">☰</button></div>
<div id="list-container" class="container-fluid list-container">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
</nav>
<div>I want the emerging vertical ul to push this element down, which it is not currently doing (even though the ul element has not been positioned absolutely or relatively)</div>
<script>
$("#hamburger").click(function() {
$("#list-container").toggleClass('active');
});
</script>
</body>
</html>