Bootstrap: Padding/alignment issue when using a .container within .navbar-expand-* responsive navbar

[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.

Default View

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.

After Fix

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

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[davidtmiller]

Bootstrap Version: 4.0.0-beta.2
Browser: Tested in latest Safari, Chrome, and Firefox
OS: OS X Sierra

Here is the default behavior. Size the preview to <992px to see the navbar collapse.
https://codepen.io/davidtmiller/pen/wPoNBm

Here is the behavior with the fix proposed above (again make sure to size the preview to <992px):
https://codepen.io/davidtmiller/pen/MObLwR

[istratos]

Same issue as reported here but it just got ignored: https://github.com/twbs/bootstrap/issues/22471
Can confirm it still exists, any os any browser.

[davidtmiller]

@istratos Thanks for finding this, I missed it in my search!

[SkuterPL]

Are you going to fix that in 4.1? Because I have the same problem like other:

You can see that padding is missing and with this it's a problem.

[agriffis]

I've been banging my head on this for a while (see #26301 and #26302) and finally realized it's impossible to fully fix with the current navbar hierarchy and code. The root of the problem is that nesting container in navbar-expand requires removing the padding from the navbar, not from the container. But that can't be done with CSS selectors, so instead Bootstrap removes the padding from the container, which only works when the container is fluid (either because it's .container-fluid, or because the screen is xs).

For example @SkuterPL shows above what happens when the screen is wide enough for the container max-width to apply. At that point, the container is centered using margin-left: auto and margin-right: auto. The container padding is inside those margins. But on the navbar, the container padding has been zeroed. Even though the navbar itself has padding, it's at the edges of the viewport.

Here is what I'm using as a workaround, after loading bootstrap css:

.navbar {
    padding-left: 0;
    padding-right: 0;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid
{
    padding-left: 15px;
    padding-right: 15px;
}

Here are a couple jsbins:

• problem
• workaround

[agriffis]

As a longer-term fix, since it's impossible to affect navbar styling by matching on a nested container, you could add a .navbar-container class to zero the navbar padding. Then kill the code that manipulates the container padding. Like this:

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 05025273f..1ebc7c8df 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -23,6 +23,11 @@
   justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;

+  &.navbar-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properities so that content nested within behave properly.
   > .container,
@@ -139,19 +144,10 @@
 // where your navbar collapses.
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

     &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        > .container,
-        > .container-fluid {
-          padding-right: 0;
-          padding-left: 0;
-        }
-      }
-
-      @include media-breakpoint-up($next) {
+      @include media-breakpoint-up($breakpoint) {
         flex-flow: row nowrap;
         justify-content: flex-start;

and then use it like this:

    <nav class="navbar navbar-container navbar-expand">
        <div class="container">
            ...
        </div>
    </nav>

[ghost]

@agriffis the code posted here https://github.com/twbs/bootstrap/issues/22471#issuecomment-338770768 doesn't work for you?

If it does, can you make a PR with that code?

[XhmikosR]

@MartijnCuppens can you confirm this is still an issue?

[istratos]

The issue still exists, it never got fixed.

[pedzed]

I can confirm this. @davidtmiller Thank you for your bug report, the image precisely describes the problem.

Changing navbar-expand-md to navbar-expand-sm seems to work in my use case.

[iamandrewluca]

Sooo.. :) Using .container .navbar and .navbar .container should behave the same?
Content should be aligned on every screen size? Can someone confirm this please? Thanks.

I want to make a fix for modal, that relates to navbar, and want to know exact behaviour.

https://codepen.io/iamandrewluca/pen/vQyERR
https://codepen.io/iamandrewluca/pen/oQYvRR

[SueIte]

We do have this issue as well, I would love it if this issue would be fixed without me using a workaround.

[hracik]

It is still an issue year later, version 4.4.1.

[MartijnCuppens]

This is fixed in v5 by requiring containers in the navbar. For v4, you can use utilities to fix this.

[kdion4891]

Still happening.

Only reasonable fix is to add px-md-3 to the container inside the navbar e.g.:

<nav class="navbar navbar-expand navbar-light">
    <div class="container px-md-3">