Opacity Interfering with Flex Navbar

Hi, Guys.

I’m doing the Product Landing Page project and I’ve stumbled upon a situation that I can not understand.

My flex nav bar somehow messes up with img elements in an article container.
I’m gonna try to explain as best as I can.

When I’m scrolling down all the page elements are being hidden behind the nav bar. That’s good, that’s how it supposed to be. Except for a couple of Img elements that stay above the nav bar. These img elements are hyperlinked have opacity(0.8) and hover effect (opacity 1, larger image). When I hover above the img elements, they hide behind the nav bar, but in normal state they stay above it. As you can see in the picture I hover over the balloons image and it hid itself behind the nav, while other elements stay above it. Once I removed the opacity from images of normal state things seemed to be fixed. What is happening here?

I’ll add nav’s and containers html & css here

NAV HTML
<nav id="nav-bar">
    <p><u>Gėlių Trobelė</u></p>
    <img id="header-img" src="gt.png" alt="Company logo">
        <ul>
            <li class="nav-link"><a href="index.html">Home</a></li>
            <li class="nav-link"><a href="order.html">Order</a>
                <ul>
                    <li><a href="#"> Bouquets</a></li>
                    <li><a href="#"> Fresh Flower</a></li>
                    <li><a href="#"> Mens Bouquets</a></li>
                    <li><a href="#"> Plants</a></li>
                </ul>
            </li>
            <li class="nav-link"><a href="doit.html">Do It Your Self</a></li>
        </ul>
    </nav>

NAV CSS

nav {
    width: 100%;
    height: 90px;
    background-color: rgb(237, 204, 96, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    right: 0; 
}
    

nav p {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 60px;
    font-weight: bold;
    width: 360px;
    height: 64px;
    line-height: 45px;
    float: left;
    padding: 15px 10px;
    color: rgb(96,128,237);
}

nav ul {
    font-size: 18px;
    font-weight: bold;
    font-family: fantasy;
    background-color: rgb(245, 245, 220, 0.5);
    float: right;
    border-radius: 5px;
    padding: 5px;
    margin: 3px 0px 0px 0px;
    
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
    border-radius: 5px;
}

nav ul li a {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: bold;
    padding: 24px 14px;
    display: block;
    text-decoration: none;
}

nav ul li ul {
    display: none;
    position: absolute;
    padding: 10px;
    border-radius: 0px 0px 5px 5px;
}

nav ul li ul li a {
    padding: 10px 14px;
}
nav ul li ul li a:hover {
    background-color: #323652;
    color: white;
}

nav ul li ul li {
    width: 200px;
    border-radius: 5px;
}

nav ul li:hover {
    background-color: #323652;  
}
nav ul li a:hover {
    color: white;
}

nav ul li:hover ul {
    display: block;

CONTAINER HTML
<div id="products">
            <p id="prname">Product Range</p>
        
                
                <p id="flname">Flowers</p>
                <p id="bqname">Bouquets</p>
                <p id="cdname">Candles</p>
                <p id="blname">Balloons</p>
                
                <a id="flowers" href="order.html#fresh">
                <img src="flowers.jpg" alt="fresh flowers"></a>
                <a id="bouquet" href="order.html#bouq">
                <img  src="bouquet.jpg" alt="bouquet"></a>
                <a id="candle" href="order.html#zvakiutitle">
                <img  src="candle.jpg" alt="candles"></a>
                <a id="balloon" href="order.html#baltitle">
                <img  src="balloon.jpg" alt="balloons"></a>    
        </div>


CONTAINER CSS

#products {
    border-radius: 20px;
    background-color: rgb(237, 204, 96, 0.3);
    width: 1200px;
    margin: 200px 0px 50px 50px;
    display: grid;
    grid-template-rows: 100px 50px 200px;
    grid-template-columns: 300px 300px 300px 300px;
    grid-template-areas: "tit tit tit tit"
    "nam nam1 nam2 nam3"
    "ic ic1 ic2 ic3";
    justify-items: center;
}
#prname {
    grid-area: tit;
    text-align: center;
    font-size: 50px;
}
#flname {
    grid-area: nam;
    font-size: 29px;
}
#bqname {
    grid-area: nam1;
    font-size: 29px;
}
#cdname {
    grid-area: nam2;
    font-size: 29px;
}
#blname {
    grid-area: nam3;
    font-size: 29px;
}

#products img {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    opacity: 0.7;
}

#flowers {
    grid-area: ic;
}
#bouquet {
    grid-area: ic1;
}
#candle {
    grid-area: ic2;
}
#balloon {
    grid-area: ic3;
}
#products img:hover {
    width: 170px;
    height: 170px;
    opacity: 1;
}

Hey @learn.code.jp,

It looks like you have a problem of an element being in front another element. This can be easily solved using the CSS attribute z-index. It lets you put an element infornt of others. Check out the docs for it:

Anyways, your problem can be easily fixed by giving your navbar a z-index of 9999 (so it will ALWAYS be on top). Here’s an example:

.navbar-element {
     z-index: 9999;
}

Hope this helps.

Thank you so much. It did help indeed :slight_smile:

1 Like