NAVBAR responsive from fixed to not fixed - html

Question

I am making a responsive navigation bar and I encountered a problem. Fixed navbar is correct and works fine. It changes transparency when scrolled, but I don't want the hamburger menu (when the device is small) to be fixed in place. How can I change from fix? What attribute should I changed? I am using bootstrap for this. Thank you!
$(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop() > 10) {
$('.navbar').addClass('active');
} else {
$('.navbar').removeClass('active');
}
});
});
function scrollValue() {
var navbar = document.getElementById('navbar');
var scroll = window.scrollY;
if (scroll < 200) {
navbar.classList.remove('BgColour');
} else {
navbar.classList.add('BgColour');
}
}
window.addEventListener('scroll', scrollValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
<div id="navbar" class="navbar">
<nav class="navbar navbar-expand-lg fixed-top bg">
<img src="images/logo.png" class="img-fluid" id="weblogo" onclick="submitToPage1();" alt="Image Not Found">
VITALY TEA
<div class="container-fluid">
<button type="button " data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right navbar-static-top container-hamburger "><i class="fa fa-bars"></i></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto ">
<li class="nav-item dropdown" id="navbtn">
<a class="nav-link dropdown-toggle" href="#Services" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="submitToPage2();">
Services
<span class="sr-only">(current)</span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="subnav">
<a class="dropdown-item" href="#">Digital Printing</a>
<a class="dropdown-item" href="#">Binding</a>
<a class="dropdown-item" href="#">Laminating</a>
<a class="dropdown-item" href="#">Cutting</a>
</div>
</li>
<li class="nav-item dropdown" id="navbtn">
<a class="nav-link dropdown-toggle" href="#Menu" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="submitToPage3();"> Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="subnav2">
<a class="dropdown-item" href="#">Warm Drinks</a>
<a class="dropdown-item" href="#">Cold Drinks</a>
<a class="dropdown-item" href="#">Sandwiches</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" id="navbtn2" href="#Orderr" onclick="submitToPage4();">
Order </a></li>
<li class="nav-item"><a class="nav-link" id="navbtn2" href="#About" onclick="submitToPage5();">
About </a></li>
<li class="nav-item"><a class="nav-link" id="navbtn2" href="#Contact" onclick="submitToPage6();">
Contact </a></li>
<li class="nav-item"><a class="nav-link" id="navbtn2" href="#Link" onclick="submitToPage7();"> Link
</a> </li>
</ul>
</div>
</div>
</nav>
</div>
</header>