Question Detial
I am a novice when it comes to Bootstrap and css in general. I would like a site with a fixed sidebar, fixed top nav and main content that scrolls.
The navbar is fixed and works ok. The layout of the sidebar and main content is fine too. The problem comes when I set the sidebar to fixed. The main content overlaps the sidebar.
I am using a basic grid layout:
Html StructureDashboard
I have tried adding a margin to the left of the main content to push it over but it looks horrible when resized to smaller device.
What is the correct way to achieve a fixed sidebar whilst still maintaining responsiveness?
Thread Reply
Muhammad Umair
- From Mobile - 11 min ago
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Martina Jaz
- From Mobile - 21 min ago
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
$('#nav').affix({
offset: {
top: $('header').height()
}
});
John Doe
- From Mobile - 40 min ago
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
$(function(){
$('.block').affix();
})
John Doe
Graphic Designer
Hot Questions