Pushing the content without it changing width when opening sidebar

Question

I have a sidebar which I open on smaller screens, When opening the sidebar, I want the content on its right to be pushed, but when I do that in the current code, the width of the div where the content is changes, making what's inside of it resize based on its width. Because it is responsive. I have several divs within it. This is the code in JSFiddle MyCode

Here I've only put text as content, so you can see how the text also behaves when I close the sidebar.

How do I make it so that the page-wrapper content to push be pushed left and right, but without it changing width ?

My HTML Code :

<div id="wrapper">
<div class="overlay"></div>

<!-- Sidebar -->
<nav class="navbar  navbar-fixed-top set-height-nav flex-colum" id="sidebar-wrapper" role="navigation">
    asdasdadas
</nav>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
    <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
        <span class="hamb-top"></span>
        <span class="hamb-middle"></span>
        <span class="hamb-bottom"></span>
    </button>
    <div class="container-fluid">
       <h3>
       Lorem ipsum dolor sit amet, quo ex graeco option, elit malis eam et. Probo solet lucilius ea pri.
                        Civibus electram referrentur pri no, sea in brute adipisci eleifend. His at gubergren conclusionemque.
       </h3>
    </div>
</div>
<!-- /#page-content-wrapper -->

My css :

body {
position: relative;
overflow-x: hidden;
}
*-------------------------------*/

 #wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
overflow: hidden;
/* width:100%; */    
width: 100%;
/* position: absolute; */
}
 #sidebar-wrapper {
z-index: 2000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 bottom: 0;
padding: 0;
display:block;
 }


#wrapper a.nav-link.active {
color: #1C2058;
font-weight: bold;
 }
 #sidebar-wrapper::-webkit-scrollbar {
 display: none;
  }
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;    
padding-top: 25px;
}
#wrapper.toggled #page-content-wrapper {    
position:absolute;
margin-right: -220px;
 }
/* Custom Css on Sidebar */

ul.full-width-navigation {
width: 220px;
}
.side .active {
position: relative;
}


nav.set-top-zindex {
background: #fff;
min-height: 50px;
/* display: none; */
}


.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
/*sidebar */

@media screen and (min-width: 576px) {
#wrapper #sidebar-wrapper {
    width: 220px;
}
#wrapper.toggled #page-content-wrapper {
    padding-left: 0;
}
#wrapper #page-content-wrapper {
    padding-left: 220px;
}
button.hamburger.is-closed {
    display: none;
}
#sidebar-wrapper {
    z-index: 1;
}

}
@media screen and (max-width: 576px) {


#wrapper.toggled .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, .8);
    margin-top: 69px;
    z-index: 1500;
    display: block;
}



}

Any help is appreciated ! Thanks!

Edit :

Current Fiddle

When opening sidebar- it pushes the content for 220px. When pressing close on the sidebar, you can see how the letters within the content shuffle, and that happens because by padding padding, the width of the page-wrapper-content get smaller, and the content inside of it changes because it is responsive.. What I need is : Press sidebar - content seems to be pushed to the right for 220px. Close sidebar - content transition back to its initial state with left:0 as the sidebar closes. Need to transition back and forth between push and pull.

Answer 1

I have created this simple example on CodePen which you may use to help solve your question and learn. In the demo, click the 'menu' button to toggle the sidebar.

The method I think you need to use is to position your main content area 'absolutely', and 'left' by the width of your sidebar when it is expanded I demo this in my demo by toggling a CSS class containing these properties on the main content area. This allows your responsive grid cells to remain the same width whilst the menu is open.

I find it easier to see examples on CodePen but I have also embedded my example here:

$("button").on("click", function() {
  $(".sidebar").toggleClass('is-active');
})

body {
  margin: 0;
  overflow-x: hidden;
}
.sidebar {
  display: none;
  width: 220px;
  height: calc(100vh - 28px);
  background: #eee;
  border-right: #ccc;
  padding: 14px;
  position: relative;
  left: -220px;
}

.sidebar.is-active {
  display: block;
  left: 0;
  transition: all 2000ms ease;
}

.sidebar.is-active~.main-content {
  width: 100vw;
  height: calc(100vh - 28px);
  position: absolute;
  left: calc(220px + 28px);
}

.main-content {
  width: 100%;
  padding: 14px;
}

.row {
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
  justify-content: space;
}

.row .cell {
  width: 100%;
  background: #eee;
  padding: 14px;
}

.row .cell:nth-of-type(2) {
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

nav a {
  display: block;
  padding: 14px;
}

.menu-btn {
  position: absolute;
  right: 0;
  z-index: 9999;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="menu-btn">Menu</button>
<div class="wrapper">
  <div class="sidebar">
    <nav>
      <a href="#">Link #1</a>
      <a href="#">Link #2</a>
      <a href="#">Link #3</a>
      <a href="#">Link #4</a>
    </nav>
  </div>

  <div class="main-content">
    <div class="row">
      <h1>Main content</h1>
    </div>
    <div class="row">
      <div class="cell">
         Cell #1
      </div>
      <div class="cell">
         Cell #2
      </div>
      <div class="cell">
         Cell #3
      </div>
    </div>
  </div>
</div>