Centering Logo with Alpha 6 Navbar

I'm not overly familiar with Flexbox but i've updated to Alpha 6 and of course due to the new changes, my navbar broke.

I used to use mx-auto on my nav logo and then set a width to center it on the navbar but i can't seem to find a way to do this now with A6.

I can get it to 'partially' center in that its offset by a few pixels but as soon as i add another link on either side, it moves.

Any suggestions how to do this? Or would it be possible to push a PR to add a class to do this?

Cheers

[svenluijten]

I'm assuming you mean this strange behaviour?

I've noticed it as well and found a relatively simple fix. Just add this to your custom CSS file and it won't happen anymore:

@include media-breakpoint-down(xs) {
    .container {
        margin-left: 0;
        margin-right: 0;
    }
}

[ivanistheone]

I can confirm the @svenluijten workaround works. The .css only version of the code for xs breakpoint is:

@media (max-width: 576px) {
  nav > .container {
      margin-left: 0;
      margin-right: 0;
  }
}

replace 576px with 768px for sm.

Hey guys,

Sorry, i did notice this issue that you've pointed out but that isn't it.

Here's my application right now in Alpha 5 stage:

https://i.gyazo.com/b33d8a7fa2fd73018882010e56dca347.png

As you can see, my logo is centered in the Navbar however in Alpha 6, with flexbox being used everywhere, i can't seem to keep it centered without a nav-item affecting it and pushing it to one side.

[davidtmiller]

@svenluijten Setting the margin-left and margin-right to 0 seems to be disabling the ability to toggle the navbar. Anyone else experiencing that issue? IOS 10 and Chrome here.

[davidtmiller]

Add a z-index: 1 to the .navbar-toggler to get the toggler working again!

So the full fix on my end was, added to the fix above by @svenluijten :

.navbar-toggler {
    z-index: 1;
}
@include media-breakpoint-down(xs) {
    .container {
        margin-left: 0;
        margin-right: 0;
    }
}

Or CSS only from @ivanistheone :

.navbar-toggler {
    z-index: 1;
}
@media (max-width: 576px) {
  nav > .container {
      margin-left: 0;
      margin-right: 0;
  }
}

[browner12]

is the actual issue that the .container has no width? should the .container just be width:100% at our XS size?

[davidtmiller]

@browner12 I just tried it out, setting the container width to 100% at less than 576px does the same thing as setting the margins to 0.

The toggler is still unusable though and needs to have it's z-index set to 1.

[davidtmiller]

@browner12 That being said, this works too as a fix (although it's a bit ugly, kind of shame.css worthy):

.navbar-toggler {
    z-index: 1;
}

@media (max-width: 576px) {
    nav > .container {
        width: 100%;
    }
}