Я хочу сделать свой веб-сайт (angular проект - компонент заголовка) удобным для мобильных устройств, но я не могу вставить значок гамбургера или меню (когда я открываю элемент проверки в мобильном режиме) на панели навигации. Кроме того, когда я открываю элемент проверки в мобильном режиме, я не могу сделать так, чтобы панель навигации была вверху при прокрутке вниз.
Я не могу понять, какие классы bootstrap мне следует использовать. Пожалуйста, помогите!
<div class="header">
<div class="container">
<nav class="navbar navbar-light bg-red navbar-expand-md fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">(Toggle)</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand scroll-top"><em>F</em>orex24</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbaritem" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-light">
<li><a href="#" class="scroll-top"><span class="fa fa-home fa-lg bg-light"></span><b> Home</b></a></li>
<li><a href="#" class="scroll-link" data-id="about"><span class="fa fa-info fa-lg bg-light"></span><b> About Us</b></a></li>
<li><a href="#" class="scroll-link" data-id="contact-us"><span class="fa fa-address-card fa-lg bg-light"></span><b> Contact Us</b></a></li>
<li><a href="#" class="scroll-link" data-id="contact-us"><span class="fa fa-sign-in fa-lg bg-light"></span><b> Login</b></a></li>
<li>
<a href="https://forex24.herokuapp.com/"><span class="fa fa-danger fa-lg bg-light"></span>
<button type="button" class="btn btn-warning"><b> FOREX LIVE</b></button></a>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
</div>
<!--/.header-->