So I created a gallery page to hold images of the website and it seems that the images of the page goes in front of the drop down box of my nav bar. And since the drop down boxes are behind the images, I am unable to click them to navigate through other pages. Is there like a way to prioritize the drop down boxes over the images? In that way, I could use the dropdown boxes like usual. Here’s the code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #788bc8;
min-height: 100vh;
overflow-x: hidden;
}
span {
color: white;
}
.navbar {
background-color: #d0f0c0;
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3%;
}
.logo {
font-size: 45px;
}
.logo a {
color: red;
text-decoration: none;
}
.navbar ul {
display: flex;
list-style-type: none;
}
.navbar ul li {
padding: 10px 25px;
position: relative;
}
.navbar ul li a {
color: black;
text-decoration: none;
font-size: 22px;
transition: all 0.2s;
}
.fas {
float: right;
margin-left: 10px;
padding-top: 3px;
}
.navbar ul li a:hover {
color: #4dac62;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul {
display: block;
margin: 10px;
text-align: center;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul li {
width: 200px;
padding: 10px;
}
.dropdownda,
.dropdownfa {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #d0f0c0;
}
.navbar > ul > li:hover :where(.dropdownda, .dropdownfa) {
display: block;
}
.main {
position: relative;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
column-gap: 10px;
row-gap: 10px;
padding: 10px 0px;
}
img {
width: 300px;
height: 300px;
object-fit: cover;
object-position: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Be Aware - First Response</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</head>
<body>
<div class="navbar">
<h1 class="logo">
<a href="home.html">BE <span>AWARE</span></a>
</h1>
<ul>
<li>
<a href="#">Drug Advocacy <i class="fas fa-caret-down"></i></a>
<div class="dropdownda">
<ul>
<li><a href="dAwareness.html">Drug Awareness</a></li>
<li><a href="dTypes.html">Types of Drugs</a></li>
<li><a href="aAndp.html">Abuse and Prevention</a></li>
</ul>
</div>
</li>
<li>
<a href="#">First Aid <i class="fas fa-caret-down"></i></a>
<div class="dropdownfa">
<ul>
<li><a href="faExplain.html">Explaining First Aid</a></li>
<li><a href="faPurpose.html">Purpose of First Aid </a></li>
<li><a href="faKit.html">First Aid Kit</a></li>
</ul>
</div>
</li>
<li><a href="cause.html">Our Cause</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div>
<div class="main">
<img src="img1.png" alt="" />
<img src="img2.png" alt="" />
<img src="img3.jpg" alt="" />
<img src="img4.png" alt="" />
</div>
</body>
</html>I’m not sure if the images will be shown in the snippet, but you can notice that the drop down box will go behind where the images are supposed to be. I’ve tried the !important on the drop down box but it doesn’t do anything.
2
Answers
In CSS, you need to assign a z-index to the image and the dropdown. Higher is the z-index number, upper is the element on the page.
the numbers could be anything, as long as dropdown’s is higher