Navbar Bootstrap opening wrong link on points of the site

Question

On my site I have a menu that I add with header.php in certain parts of the site, home and its symbolic links. the problem is when you go from the horizontal menu to that button that opens responsive. if I’m on one on the internal links and click on the button it will open the menu of the home and not the internal link( simbolico) I’m in question.

Index.php

   esse é o principal que ele sempre abre.
   <div class="wrapper">
    <?php
        include("header.php");
    ?>....
   <div id="qualidade-page" class="wrapper">
    <?php
    include("header.php");
    ?>...
 <div id="contato-page" class="wrapper">
    <?php
    include("header.php");
    ?>....

header.php

 <div class="main-header">
   <a href="index.php" class="logo">
     <!-- mini logo for sidebar mini 50x50 pixels -->
     <span class="title">titulo </span>
</a>
    <p class="title-lateral>subtitulo</p>
   <div class="menu">
       <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">
<ul class="navbar-nav mr-auto my-2 my-lg-0">
  <li class="nav-item">
    <a class="nav-link" href="index.php#produtos-page" >Produtos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link "  href="index.php#qualidade-page">Qualidade</a>
  </li>
   <li class="nav-item">
    <a class="nav-link" href="index.php#contato-page" >Contato</a>
  </li>
</ul>
</div>
</nav>
</div>
</div>

css

.menu{
    margin-top: 1%;
    width: 100%;
    background-color: #E8E8E8;
    height: 60%;
}

.nav-item{
    padding-right: 3%;
    padding-top: 1%;
    padding-left: 1%;

}
.nav-item a{
    color:#5b5454;
}