I was following 2 youtube tutorials while working on a website. One tutorial was on building a complete website that's responsive and the second was on creating an image gallery with a grid layout. The end result that I had when I finished working on my website looked good but I noticed two problems.
When you decrease the size of the website so that it takes up half of your screen, the navbar shrinks down and you get a hamburger menu. But clicking on the hamburger isn't opening it up like it should. There's an eventListener that should be adding and removing a class called active but nothing is happening.
This is the html code that contains the navbar and hamburger icon
<header>
<a href="#" class="logo">Glitta Art Studio</a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
This is the CSS for the media query
@media(max-width: 1140px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: #2b2640;
transition: .3s;
}
header .navbar .active {
top: 70px;
}
.navbar a {
padding: 1.5rem;
display: block;
}
.col {
width: 50%;
margin-bottom: 10px;
}
}
And here's the JavaScript
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
menu.addEventListener("click", function () {
navbar.classList.toggle("active")
});
window.onscroll = () => {
navbar.classList.remove("active");
};
The second problem is technically not as big of a deal as the nav, but it's been more annoying for me to deal with so far. When you move your mouse over one of the images in the gallery section, a white box appears over the image with a title of the image and some information about it. But for some reason, the person in the tutorial added an a tag to the text in these boxes and I blindly added that to my project without thinking. Clicking on the box brings you back up to the homepage so I want to get rid of that completely and not have it link to anything. I'm not sure what the issue is with the CSS, but if you try to remove the a tags in the html and replace them with a regular p tag then it completely ruins the the grid of images and they all get stuck on one side of the screen.
Here's the HTML code of the gallery (There's 10 divs exactly like this with the same filler text and temporary image)
<div class="image-gallery">
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
<a href="">Painting Title</a>
</h3>
<span class="category">
<a href="">text about piece here</a>
</span>
</div>
</div>
</div>
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
<a href="#">Painting Title</a>
</h3>
<span class="category">
<a href="#">text about piece here</a>
</span>
</div>
</div>
</div>
And here's the CSS
.gallery {
margin: 0;
padding: 0;
position: relative;
}
.image-gallery {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 50px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.image-gallery .image-box {
position: relative;
background-color: #d7d7d8;
overflow: hidden;
}
.image-gallery .image-box:nth-child(7n + 1){
grid-column: span 2;
grid-row: span 2;
}
.image-gallery .image-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.image-gallery .image-box:hover img {
transform: scale(1.1);
}
.image-gallery .image-box .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafaf2;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.5s ease;
z-index: 1;
}
.image-gallery .image-box:hover .overlay {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
opacity: 1;
}
.image-gallery .image-box .details {
text-align: center;
}
.image-gallery .image-box .details .title {
margin-bottom: 8px;
font-size: 24px;
font-weight: 600;
position: relative;
top: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box .details .category {
font-size: 18px;
font-weight: 400;
position: relative;
bottom: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box:hover .details .title {
top: 0px;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box:hover .details .category {
bottom: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
color: #222222;
text-decoration: none;
}
Sorry for asking these basic questions. I haven't practiced coding anything in a long while so I've forgotten a lot of things.
Edit: I was able to fix the gallery issue. Now its just the hamburger issue that I have to deal with