在移动设备上使用网站时如何在导航栏中插入汉堡包或菜单栏？

Question

我想使我的网站（角度项目-标头组件）适合移动设备使用，但是我无法在（以移动模式打开检查元素时）插入汉堡包或菜单图标导航栏。 同样，在移动模式下打开检查元素时，向下滚动时，导航栏也不会停留在顶部。

我无法确定应该使用哪种引导程序。 请帮忙！

<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-->