Bootstrap Mobile menu button hide when scroll - responsive-design

Question

I have this responsive website, but for the menu part in Mobile when I scroll it doesn't show the buttons anymore, I should scroll back to the top to get to the buttons.
I don't know why the buttons in the mobile menu don't scroll within the screen.
HTML
/* ------------------------------------------------------------------------------
Header
-------------------------------------------------------------------------------*/
#header {
position: fixed;
width: 100%;
z-index: 999;
}
#header .header-content {
margin: 0 auto;
max-width: 1170px;
padding: 20px 0;
width: 100%;
-moz-transition: padding 0.3s;
-o-transition: padding 0.3s;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
#header .logo {
float: right;
font-size:24px;
font-weight:700;
color:#fff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:7px;
}
#header.fixed {
background-color: #181818;
padding: 0;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
#header.fixed a {
color: #fff;
}
#header.fixed .header-content {
border-bottom: 0;
}
#header.fixed .nav-toggle {
top: 18px;
color: #000;
}
.navigation.open {
opacity: 0.9;
visibility: visible;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.navigation {
float: left;
padding-top: 20px;
}
.navigation li {
display: inline-block;
}
.navigation a {
color: rgba(255, 255, 255, 0.75);
font-size: 20px;
margin-left: 40px;
text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
color: #fff;
}
.nav-toggle {
display: none;
height: 44px;
overflow: hidden;
position: fixed;
left: 5%;
text-indent: 100%;
top: 32px;
white-space: nowrap;
width: 44px;
z-index: 99999;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
.nav-toggle:before {
background-color: #1192cf;
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav-toggle:after {
background-color: #1192cf;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.nav-toggle span {
background-color: #fff;
bottom: auto;
display: inline-block;
height: 3px;
left: 50%;
position: absolute;
right: auto;
top: 50%;
width: 18px;
z-index: 10;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
background-color: #fff;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.nav-toggle span:before {
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-webkit-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.nav-toggle.close-nav:after {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-toggle.close-nav span {
background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
background-color: #fff;
}
.nav-toggle.close-nav span:before {
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
#media screen and (max-width: 1024px) {
#header .header-content {
width: 90%;
padding:20px 0px;
}
#header.fixed a {
color: #000;
}
.nav-toggle {
display: block;
}
.navigation {
position: fixed;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99999;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.navigation .primary-nav {
position: relative;
top: 45%;
-moz-transform: translateY(-45%);
-ms-transform: translateY(-45%);
-webkit-transform: translateY(-45%);
transform: translateY(-45%);
}
.navigation li {
display: block;
margin-bottom: 20px;
}
.navigation a {
display: block;
font-size: 25px;
margin: 0;
text-align: center;
}
.flex-control-nav {
bottom: 20px;
}
}
<header id="header">
<div class="header-content clearfix"> <a class="logo" href="index.html"><img style="logo-size" src="images/logo-awaed.png" width="150px" height="62px"></a>
<nav class="navigation" role="navigation">
<ul class="primary-nav">
<li>عن الشركة</li>
<li>خدماتنا</li>
<li>اتصل بنا</li>
</ul>
</nav>
Menu<span></span> </div>
</header>

Answer 1

Don't reinvent the wheel. Read the Bootstrap documentation and use the navbar and the navbar components Bootstrap 4 provides.
Here's a working navbar example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Reference:
https://getbootstrap.com/docs/4.0/components/navbar/