Navbar issue for bootstrap in Mobile View

Question

I am trying to develop a simple website, using navbar, wanted it to be transparent with the image, when you are using a PC it gets normal, but when it accesses via mobile the menu overlaps the component below, how can I solve this?

if I remove the fixed-top class, the menu does not become transparent with the overlay image

Mobile View

This is my code:

<div class="container ">
  <a class="navbar-brand" href="/">
    <img class="img-fluid" src="img/logo.png" alt="Logo" title="Logo da Isco Sistemas">
  </a>
  <span class="h4 text-dark" href="#">41. 3156-4726</span>

</div>

Answer 1

<div class="container ">  
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="/">
    <img class="img-fluid" src="img/logo.png" alt="Logo" title="Logo da Isco Sistemas">
  </a>
  <span class="h4 text-dark" href="#">41. 3156-4726</span>
  </div>
</nav>

</div>