Having trouble adding a link over a background image of the head-bg-image div into ul li. The link is not functioning properly.
<div id="product_banner">
<div class="head-bg">
<div class="head-bg-img"></div>
<ul class="d-inline-block " style="nav navbar navbar-left d-flex d-inline-flex" >
<li class="nav-item d-inline-flex align-items-center mr-2" style="margin-
left:25px;color:#959c97;">
<a>Home</a>
</li>
<li class="nav-item d-inline-flex align-items-center mr-2" style="margin-left:25px;
color:#959c97;">
<h5>Service 2</h5>
</li>
</ul>
The CSS code is as follows, but even hover functionality is not working:
#product_banner .head-bg-img {
position: absolute;
left: 0;
top: 0;
background: url(http://demo.nrgthemes.com/projects/nrgnetwork/img/bg.jpg);
height: 100%;
width: 100%;
background-size: cover;
opacity: 0.2;
z-index: 1;
background-position: center center;
}
#product_banner .head-bg-content {
height: 400px;
text-align: center;
position: relative;
z-index: 200;
display: table-cell;
vertical-align: middle;
width: 5000px;
}
Below is the code for hover effect, which is also not functional:
product_banner .head-bg-img a{
color:#fcfffd;
font-weight:bold;
}
#product_banner .head-bg-img a:hover{
color:#fcfffd;font-weight:bold;
}