Bootstrap 4 navbar moves a bit when the modal opens

Hi, I'm having a problem that I do not know if it's a bootstrap bug or not, what happens is that when you open the modal, the navbar moves a bit and then when you close it, it's like an effect that moves towards the sides, this is my code:

<div class="modal fade" tabindex="-1" role="dialog" id="myModal"></div>

and the navbar:

<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container-fluid">
  <a href="#"><img src="imagenes/logo.png" class="navbar-brand icono"></a>
  <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <div class="dropdown  hvr-grow">
          <button class="btn btn-default dropdown-toggle d-flex flex-row justify-content-between align-items-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-shopping-cart"></i>
            <div id="carrito" class="d-line m-1">0</div>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

          </div>
        </div>
      </li>
      <?php
        mostrar_categorias();
      ?>   
    </ul>
  </div>
</div>
</nav> 

To the modal I open it by means of a function with javascript