Bootstrap navbar menu not displayed on mobile - html

Question

I am using bootstrap 4 to make a simple theme.
My problem is, that when I view the page on mobile, and click the menu button, the menu shows up for 1 second, and then hide it self. If I click the button gain, it wont show up.
Demo site here
My menu source code from the browser (I don't use the sticky classes)
<header class="header header-sticky- header-transparent__">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg">
<!-- Logo START -->
<a class="navbar-brand" title="IQ Logistics Kft." href="https://kozetgyapot-arak.hu">
<img class="img-fluid" src="https://themes.potenzaglobalsolutions.com/html/bulky/images/logo.svg" alt="IQ Logistics Kft.">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto_">
<li class="nav-item"><a class="nav-link" title="Kezdőlap" href="https://kozetgyapot-arak.hu/">Kezdőlap</a></li><li class="nav-item"><a class="nav-link" title="Rólunk" href="https://kozetgyapot-arak.hu/rolunk">Rólunk</a></li><li class="nav-item"><a class="nav-link" title="Szolgáltatások" href="https://kozetgyapot-arak.hu/szolgaltatasok">Szolgáltatások</a></li><li class="nav-item"><a class="nav-link" title="Elérhetőségeink" href="https://kozetgyapot-arak.hu/elerhetosegeink">Elérhetőségeink</a></li> </ul>
</div>
<div class="mr-5 mr-lg-0 d-sm-flex d-none align-items-center">
<a class="btn btn-primary" href="https://kozetgyapot-arak.hu/arajanlat-kerese">Árajánlat kérése <i class="fa fa-chevron-right ml-1"></i></a>
</div>
</nav>
</div>
</div>
</div>
</header>
Thank you, if someone can help me.

Answer 1

It seems to work fine with this html. Note that I did leave out the Font Awesome stylesheet in the snippet below. Also note that the popper script is bundled in the bootstrap script so you heave to remove it from your project as an extra script.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<header class="header header-sticky- header-transparent__">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" title="IQ Logistics Kft." href="https://kozetgyapot-arak.hu">
<img class="img-fluid" src="https://themes.potenzaglobalsolutions.com/html/bulky/images/logo.svg" alt="IQ Logistics Kft.">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item"><a class="nav-link" title="Kezdőlap" href="https://kozetgyapot-arak.hu/">Kezdőlap</a></li>
<li class="nav-item"><a class="nav-link" title="Rólunk" href="https://kozetgyapot-arak.hu/rolunk">Rólunk</a></li>
<li class="nav-item"><a class="nav-link" title="Szolgáltatások" href="https://kozetgyapot-arak.hu/szolgaltatasok">Szolgáltatások</a></li>
<li class="nav-item"><a class="nav-link" title="Elérhetőségeink" href="https://kozetgyapot-arak.hu/elerhetosegeink">Elérhetőségeink</a></li>
</ul>
</div>
<div class="mr-5 mr-lg-0 d-sm-flex d-none align-items-center">
<a class="btn btn-primary" href="https://kozetgyapot-arak.hu/arajanlat-kerese">Árajánlat kérése <i class="fa fa-chevron-right ml-1"></i></a>
</div>
</nav>
</div>
</div>
</div>
</header>