Padding/alignment issue when using a .container within .navbar-expand-* responsive navbar
Created by: davidtmiller
When using a container within a responsive navbar, it seems that the padding is being removed - which is necessary under the xs breakpoint, <576px. Between the xs breakpoint and wherever the navbar is collapsing however, the padding seems a bit off.
I located the portion of the SCSS that is responsible for this. In the _navbar.scss
file, I found:
@include media-breakpoint-down($breakpoint) {
> .container,
> .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
Which, when using navbar-expand-lg
for example, sets the left and right margins to 0 at 991px and below.
Now I am not super familiar with the Bootstrap SASS setup, so I was unable to produce a fix in the Bootstrap SASS, but I created a messy override that was a working solution to this alignment problem.
Live Demo on CodePen: https://codepen.io/davidtmiller/pen/wPoNBm
The fix is just some SASS I added after loading Bootstrap:
.navbar-expand-lg,
.navbar-expand-md,
.navbar-expand-sm,
.navbar-expand-xl {
> .container,
> .container-fluid {
padding-left: 15px;
padding-right: 15px;
@media (max-width: 575px) {
padding-left: 0;
padding-right: 0;
}
}
}
With this fix, the collapsed navbar aligns with the rest of the page content, and continues to align correctly after the xs breakpoint is reached.
Live Demo on CodePen: https://codepen.io/davidtmiller/pen/MObLwR
Again I'm not quite sure how to approach this in the SASS files, I know the answer will be shifting some things around with the _navbar.scss
file, like adding a media-breakpoint-min
mixin or something like that.
System Info:
- Mac OS X Sierra
- Most Recent Chrome/Firefox/Safari