I am currently facing an issue where a portrait is overlapping my navigation bar. Despite my efforts to find a solution, I have not been successful so far. I attempted to use z-index, but unfortunately, it did not resolve the problem.
Below is the code for the troublesome section:
/*Navbar Styling*/
.topNavMain,
.topNavMain ul {
margin: 0;
padding: 0;
background: rgba(227, 232, 237, 0.40);
color: #5f6f81;
list-style: none;
text-transform: none;
text-decoration: none;
width: 100%;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
z-index: 999 !important;
}
/*Portrait Image Styling*/
.imgPortrait {
width: 80%;
z-index: -999;
overflow: hidden;
}<section id="aboutMe" class="contentS">
<div class="container">
<div class="row">
<div class="col slideIn margin-fix">
<h2 class="contentT">About me</h2>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="col slideIn2">
<img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"></img>
</div>
</div>
</div>
</section>Here's a screenshot illustrating the issue: Click here.