Issue
I have been trying to make this navigation bar usable for mobile devices, I have tried multiple method by watching youtube using @media or hamburger method, but none of them seem to work for this, Unless I rewrite the html to match how they use it.
This is my original code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waverly Farm: Home</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<header class = "header">
<div class = "logo">Waverely Farm</div>
<nav class = "navbar">
<a href ="index.html">Home</a>
<a href ="about_us.html">About Us</a>
<a href ="services.html">Services</a>
<a href ="shop.html">Shop</a>
<a href ="contactus.html">Contact Us</a>
</nav>
</header>
</body>
</html>
I have tried adding @media but I am not sure how to use it for this type of navigation bar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: aquamarine;
display:flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo{
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.navbar a{
position: relative;
font-size: 18px;
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 40px;
}
.navbar a::before{
content:'';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background: #fff;
transition: .3s;
}
.navbar a:hover::before{
width: 100%;
}```
Solution
document.querySelector(".mobile-menu-icon").addEventListener("click", function () {
var navbar = document.querySelector(".navbar");
var header = document.querySelector(".header");
if (navbar.style.display === "flex") {
navbar.style.display = "none";
header.classList.remove("mobile-menu-open");
} else {
navbar.style.display = "flex";
header.classList.add("mobile-menu-open");
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background-color: aquamarine;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.navbar {
display: flex;
}
.navbar a {
font-size: 18px;
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 40px;
}
.mobile-menu-icon {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #fff;
margin: 4px 0;
}
@media (max-width: 768px) {
.navbar {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
background: aquamarine;
width: 100%;
text-align: center;
}
.navbar a {
margin: 10px 0;
}
.mobile-menu-icon {
display: flex;
}
}
.header.mobile-menu-open .navbar {
display: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waverly Farm: Home</title>
</head>
<body>
<header class="header">
<div class="logo">Waverely Farm</div>
<nav class="navbar">
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="services.html">Services</a>
<a href="shop.html">Shop</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div class="mobile-menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</header>
</body>
</html>Answered By - Brian Baker
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.