The following code will provide a navigation bar that collapses on Mobile view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Hamburger Menu</title>
<style>
#MenuContainer {
position: relative;
}
.menu-toggle {
display: none;
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}
#MenuItems {
display: flex;
}
#MenuItems .MenuItem {
margin: 0 10px;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
#MenuItems {
display: none;
flex-direction: column;
position: absolute;
background-color: white;
width: 100%;
top: 40px;
left: 0;
z-index: 1000;
border: 1px solid #ccc;
}
#MenuItems .MenuItem {
margin: 10px 0;
text-align: center;
}
#MenuItems.active {
display: flex;
}
}
</style>
</head>
<body>
<div id="MenuContainer">
<button class="menu-toggle" onclick="toggleMenu()">☰</button>
<div id="MenuItems">
<span class="MenuItem"><a href="index.php">Link 1</a></span>
<span class="MenuItem"><a href="index.php">Link 2</a></span>
<!-- Repeat as needed-->
</div>
<div style="clear:both"></div>
</div>
<script>
function toggleMenu() {
var menuItems = document.getElementById("MenuItems");
if (menuItems.classList.contains("active")) {
menuItems.classList.remove("active");
} else {
menuItems.classList.add("active");
}
}
</script>
</body>
</html>
Disclaimer: The code on this website is provided "as is" and comes with no warranty. The author of this website does not accept any responsibility for issues arising from the use of code on this website. Before making any significant changes, ensure you take a backup of all files and do not work directly on a live/production website without thoughly testing your changes first.