Bootstrap: Navbar-expand and paddings

[danijelGombac]

Bootstrap v4dev

I don't know if I understood, .navbar-expand is used when you want the .navbar is always expanded?

I try this way, but when i use .navbar-expand, the paddings are removed from container and the content is larger then the other part.

https://jsbin.com/zoyuqiteri/edit?html,output

[mdo]

Yes, we toggle the padding and margin a bit to make the navbar behave as we want it to. As I recall there wasn't much of a way around it.

[istratos]

I don't know if this problem has been addressed but this happens with all other expands as well (navbar-expand-sm, navbar-expand-md, lg, etc)

In this particular case, these lines are causing this problem:

.navbar-expand > .container,
.navbar-expand > .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

Which can be solved by wrapping them only in the media they should be valid

@media (max-width: 575px) {
    .navbar-expand > .container,
    .navbar-expand > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

All other expands are fixed by including them inside this media as well.

As of now, for example, navbar-expand-md loses its .container padding from 576px to 767px screens.
This is because of this code

@media (max-width: 767px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Simply by adjusting its max-width to 575 (xs screen) solves this problem.
I don't seem to understand the reason behind toggling the padding like this, as navbars are still behaving as expected after this fix. This is the reason this seems like a problem. Am I missing something? @mdo

[maniqui]

@mdo please, could you consider reopening this issue?

I've noticed this same issue.
In case it's not clear what's happening, here is an screenshot of the issue happening on Bootstrap v4-alpha website.
As you can see, the container inside navbar-toggleable (or navbar-expand if you are on v4-dev), is missing its horizontal padding, and so, the Bootstrap brand and the hamburguer menu are misaligned.

As others, I also don't understand the reason behind toggling the padding.

The issue is both present in alpha-6 release and v4-dev branch.

[maniqui]

For anyone compiling Bootstrap from SASS sources, you can restore the horizontal padding on .navbar-expand-* elements by monkeypatching your code in a custom SASS file (imported below _navbar.scss) that generates the very same .navbar-expand-* classes, allowing those classes to have more precedence.

In your custom SASS file, you add:

// Generate series of `.navbar-expand-*` responsive classes for configuring
// 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} {
      @include media-breakpoint-down($breakpoint) {
        > .container,
        > .container-fluid {
          padding-right: $navbar-padding-x;
          padding-left: $navbar-padding-x;
        }
      }
    }
  }
}

As you can see, it's the very same code taken from bootstrap/scss/_navbar.css but only monkeypatching the relevant parts to restore the horizontal padding (using $navbar-padding-x variable).

[mrlife]

This worked for .container on V4 Beta 1:

.navbar-expand > .container {
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 575px) {
    .navbar-expand > .container {
        padding-right: 0;
        padding-left: 0;
    }
}

[pedzed]

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

As I recall there wasn't much of a way around it.

Around what? This seems to be a bug.

[boutzamat]

Why is this closed again?
It seems only quickfixes has been suggested, and no actual solution or response to if it is going to be fixed or not.

[loeffel-io]

navbar-expand-sm worked as @pedzed mentioned 👍