In my interface, there is a sidebar that I reveal on smaller screens. However, when I open the sidebar, I want the content to its right to be pushed as well. The issue with the current implementation is that the width of the content div changes when the sidebar opens, causing the contents inside it to resize based on the new width due to responsiveness. The HTML and CSS code related to this problem can be found in this JSFiddle link.
I have included only text content in the example so you can observe how the text behaves when the sidebar is closed.
Is there a way for me to make sure that the content in the page-wrapper is pushed to the left or right without changing its width?
Here is the snippet of 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 -->
Your assistance in resolving this issue would be highly appreciated! Thank you!
Edit :
On opening the sidebar, the content gets pushed aside by 220px. But upon closing the sidebar, the text within the content shuffles due to the padding change causing the width adjustment. To avoid this, I need the content to smoothly transition back without altering its dimensions. Essentially, I aim to seamlessly toggle between pushing and pulling the content.