I've seen this question asked multiple times, but none of the solutions I came across have been effective for me.
My project involves using Bootstrap 3 with a fixed left sidebar, single column row page content, and a fixed right sidebar. While the left sidebar works as expected, the right sidebar doesn't respect the min-width setting of the page, causing it to overlap with the content (screenshots attached).
What I'm aiming for is to set a minimum width of 1024px for the page, where the content remains unchanged and the right sidebar stays in place without overlapping if the browser size drops below 1024px.
For now, I'm not focusing on responsive design as there will be a separate layout for smaller screens.
If anyone has a solution or suggestion for this issue, please share. Thank you!
Before Browser Resize >1024px: After Browser Resize <1024px:
CSS Code:
html,
body {
height: 100%;
min-width: 1024px !important;
width: auto !important;
width: 1024px;
/* The html and body elements cannot have any padding or margin. */
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -70px;
}
#wrapper {
padding-left: 75px;
padding-right: 350px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -75px;
left: 75px;
width: 75px;
background: #393839;
position: fixed;
height: 100%;
overflow-y: hidden;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#page-content-wrapper {
min-width: 970px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 75px;
list-style: none;
margin: 0;
padding: 0;
}
#whobar-wrapper {
margin-right: -350px;
right: 350px;
width: 350px;
background: #393839;
position: fixed;
height: 100%;
overflow-y: hidden;
z-index: 1000;
transition: all 0.4s ease 0s;
}
.whobar-nav {
position: absolute;
top: 0;
width: 400px;
list-style: none;
margin: 0;
padding: 0;
}HTML Code:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" class="sidebar_sheet sidebar_sheet-profile" title="My Profile"></a>
</li>
<li>
<a href="#" class="sidebar_sheet sidebar_sheet-contacts" title="Contacts"></a>
</li>
<li>
<a href="#" class="sidebar_sheet sidebar_sheet-shortlist" title="Shortlist"></a>
</li>
<li>
<a href="#" class="sidebar_sheet sidebar_sheet-explore" title="Explore"></a>
</li>
</ul>
</div>
<div id="whobar-wrapper">
<!-- <ul class="whobar-nav">-->
<!-- <li><a href="#" class="sidebar_sheet sidebar_sheet-profile" title="My Profile"></a></li>-->
<!-- <li><a href="#" class="sidebar_sheet sidebar_sheet-contacts" title="Contacts"></a></li>-->
<!-- <li><a href="#" class="sidebar_sheet sidebar_sheet-shortlist" title="Shortlist"></a></li>-->
<!-- <li><a href="#" class="sidebar_sheet sidebar_sheet-explore" title="Explore"></a></li>-->
<!-- </ul>-->
</div>
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<h1>Temporary Dashboard Header</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</div>
</div>