I’m trying to make a responsive website with a toggle menu, but it’s proving difficult. Because I’m a beginner at programming, I’ve included all of the code I’ve written thus far. This is my HTML header, which also includes other sections and divs, as well as the hamburger menu’s button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
<!-- <link rel="script" href="script.js"> -->
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./image/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<i class="fas fa-bars" onclick="hideMenu()"></i>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu"></i>
</nav>
<div class="text-box">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
<a href="#" class="hero-btn">similique rerum evenietodio?</a>
</div>
</section>
<!-- Services -->
<section class="services">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>
<div class="row">
<div class="img">
<img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="text">
<small>Build a foundation</small>
<h3>Remedial Education</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
<div class="button">
<button class="sec1don">Donate₹</button>
<button class="sec1vol">Volunteer</button>
</div>
</body>
</html>Also, here’s the CSS I’m attempting to implement:
* {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
}
/* BANNER */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
background-position: center;
background-size: cover;
}
/* NAVBAR */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
transition: 0.5s;
}
/* TEXTBOX DIV */
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-family: 'Source Code Pro', monospace;
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
}
nav .fas {
display: none;
}
/* Services section */
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.services h1 {
font-size: 48px;
font-weight: 700;
font-family: 'Source Code Pro', monospace;
}
.services p {
color: #777;
font-size: 18px;
font-weight: 300;
line-height: 22px;
}
/* service section div 1*/
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
img {
width: 25rem;
}
.text {
display: block;
margin: auto;
padding: 0 0 0 2rem;
text-align: left;
}
.text small {
font-size: 1.5rem;
color: rgb(155, 155, 155);
text-transform: capitalize;
}
.text h3 {
font-size: 3rem;
font-family: 'Source Code Pro', monospace;
}
.text p {
font-family: 'Open Sans', sans-serif;
letter-spacing: .5px;
}
.text .button {
text-align: center;
}
.button button {
font-size: 22px;
color: #777;
background-color: #fff;
border: 1px solid #777;
border-radius: 5px;
padding: 5px;
}
.button button:hover {
color: #fff;
background-color: #777;
border: 1px solid #fff;
}
hr {
margin-left: -40px;
margin-right: -40px;
}
/* media queries */
@media(max-width: 700px) {
.text-box h1 {
font-family: Source Code Pro;
font-size: 20px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 10px;
}
/* navbar */
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: rgb(255, 255, 255, 0.2);
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fas {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
I tried the following JS function:
// javascript for toggle menubar
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
I’m not sure what the answer is; any assistance would be highly appreciated, and please assist me as a rookie programmer.