css twitter-bootstrap navigation hamburger-menu onepage-scroll

Extending and changing the navbar when the user scrolls down

I'm currently working on a project website right now and is a one-page website, and I'm new at Bootstrap 3 so I'm still using some start-up templates. The issue I'm having trouble right now is that I don't know how to put an effective but complicated hamburger menu that the client wants:

when the user is on the home page or the header/carousel, the hamburger menu alone should be on a transparent nav background on the upper right of the screen (not on the edge).
this header hamburger menu from the header should hide or just be fixed upside when you scroll down a bit.
when you scroll down AFTER the header, the intended black nav bar should appear, fixed on top, which should extend the small navbar earlier and then become a full screen 100% width bar with the hamburger menu on the right side and company logo on the left side.
when the hamburger menu is clicked, a navigation box on the right side of the screen should appear.

This is my HTML:

<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand">Navigation</a></li>
            <li><a href="#top">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Works</a></li>
            <li><a href="#portfolio">People</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

I'm currently using a Bootstrap 3 standard template because I wanted to learn more about it before moving to 4. This is my CSS:

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary .badge {
  color: #428bca;
  background-color: #fff;
}

This is all I'm working with right now for the menu. I would have wanted to create new classes for those stuff so I won't rely on the Bootstrap template and I can edit it asap without messing all up.

Solution

I think what you need is a sidebar with some scrolling effects. You will have to use some javaScript to achieve this. I don't know the details of exactly how it is done, but I can give you some resources which will help you achieve that.

Make a transparent navbar with hamburger menu. (Code given below)

.navcolor{
  background-color:rgba(0,0,0,0);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
<body>
<nav class="navbar navbar-light navcolor  mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">People</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

Create the sidebar. Follow this blog post to achieve that https://bootstrapious.com/p/bootstrap-sidebar
Add the scrolling effects. See this code on codepen. https://codepen.io/sonorangirl/pen/XmRBjq

I'm sure you can combine all the above steps to achieve what you want. All the best !