I am trying to create a sample responsive web page with navigation bar for big as well as small screens. I have done with the part for big screens. I am trying to create for smaller screen devices, with a navigation button which after clicking should open the navigation bar from top.
I have tried creating a function and link it to the navbar button, but after clicking that button everything on the page just keeps disappearing and page gets blank. Please help me out with this.
What I want is, when user clicks on the ≡ navbar button, navbar should open and at the same time close ❌ button should appear for closing, in the place navbar button ≡ and again replaced by same after closing.
Here is my code, need help!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.navbar-small {
display: none;
}
#navbar {
width: 100%;
background: #f44336;
display: inline-block;
}
#navbar>a {
color: #ffffff;
margin: 0;
padding: 12px 20px;
float: left;
}
#navbar>a:hover {
background: #ffffff;
color: #f44336;
cursor: pointer;
}
@media only screen and (max-width: 770px) {
#navbar {
display: none;
}
.navbar-small {
width: 100%;
background: #f44336;
display: flex;
flex-direction: column;
}
.navbar-small>.nav-menu {
display: inline-block;
width: 100%;
}
.navbar-small>.nav-menu>a {
color: #ffffff;
margin: 0;
padding: 12px 20px;
}
.navbar-small>.nav-menu>a:hover {
background: #ffffff;
color: #f44336;
cursor: pointer;
}
.navbar-small>.hidden {
display: none;
width: 100%;
text-align: center;
margin: 0;
color: #ffffff;
}
.navbar-small>.hidden>a {
width: 100%;
float: none;
display: block;
padding: 12px 0;
color: #ffffff;
}
.navbar-small>.hidden>a:hover {
background: #ffffff;
color: #f44336;
cursor: pointer;
}
}
</style>
</head>
<body>
<div class="navbar-small">
<section class="nav-menu">
<a href="#" style="float: left;">Home</a>
<a class="nav-btn" href="#" style="float: right;" onclick="open()"><i class="fa fa-bars"></i></a>
</section>
<section class="hidden">
<a class="link" href="#">Link 1</a>
<a class="link" href="#">Link 2</a>
<a class="link" href="#">Link 3</a>
<a class="link" href="#">Link 4</a>
</section>
</div>
<nav id="navbar">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<header id="header">
</header>
<script type="text/javascript" charset="utf-8">
function open() {
document.getElementsByClassName("hidden").style.display = "block";
}
</script>
</body>
</html>