I'm currently facing an issue with my website where the navbar at the top is not displaying above all other content as expected. Despite trying various approaches such as adjusting the z-index and setting absolute positioning, the navbar still remains hidden underneath images and headers within the Bootstrap 4 grids. Even changing the background color to black didn't resolve this problem. How can I address this issue effectively?
TL;DR: My attempts to make the navbar display above content within Bootstrap rows have failed. Any suggestions on how to resolve this?
@font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
@font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
.navigation {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
background-color: black;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding: 20px;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
... (remaining code truncated for brevity)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
... (remaining code truncated for brevity)
</body>
</html>