Sidebar on toggle, to push topbar - css

Question

What I am trying to achieve is this:
Without using javascript/jquery.
I have a topbar and a sidebar. On smaller screens, I want the sidebar to collapse and have a button on top, and when the button is clicked the sidebar toggles horizontally, adding opacity to the background, putting the button on the topbar, and putting all content from within the topbar inside the sidebar.
Similar to when the screen is small for Youtube page, and the sign in option appears on the sidebar.
This is the code I have so far :JSFIDDLE
<header>
<nav class="navbar navbar-expand-sm fixed-top navbar-light bg-faded">
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img class="navbar-brand navbar-logo" src="" />
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto user-info">
<li class="avatar">
<img src="">
</li>
<li class="nav-item dropdown">
<a class="nav-link ">Hello</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
<div id="mySidenav">
<nav class="col-sm-3 col-md-3 col-6 col-lg-2 d-sm-block sidebar collapse
width " id="sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
<a class="nav-link">
<img src="" />Home </a>
</li>
<ul class="sub-menu collapse" id="home">
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu1</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu2</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu3</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu4</a>
</li>
</ul>
<li class="nav-item side">
<a class="nav-link">
<img src="a" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
</ul>
</nav>
</div>
<main role="main" class="col-sm-9 ml-sm-auto col-md-9 col-lg-10 pt-3 content">
<h1>
Main Content here
</h1>
</main>
</div>

Answer 1

in your JSFiddle change css (top has to be 0px) : JsFiddle
.sidebar {
position: fixed;
top: 0px;
left: 0;
z-index: 1;
padding: 0;
overflow-x: hidden;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: black;
height: 100%;
}