Search code examples
twitter-bootstraptwitter-bootstrap-4

Bootstrap 4 Alpha 6 navbar-toggler-right and left create strange behavior

I have a simple navbar:

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #321048;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav d-flex justify-content-end" style="width:100%">
              <li class="nav-item">
                <a class="nav-link" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#rolfing">Rolfing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#packages">Packages</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">Contact</a>
              </li>
            </ul>
        </div>
</nav>

And everything works as expected for all screen sizes. enter image description here I wanted to right justify the toggler because the menu is right justified. So per Bootstrap 4 alpha 6, I added

navbar-toggler-right

to the button, and it indeed does right justify the button, but the navbar itself no longer expands to fill the button. So the toggle button looks to be just floating. I am content to leave navbar-toggler-right out let it work, but I am just curious why it would do that. something to do with navbar-toggler-right having an absolute position perhaps. navbar-toggler-left does the same thing as well.

enter image description here

EDIT To offer more detail, it does not matter that the toggle button be on the left or on the right. Adding the class navbar-toggler-left causes the same problem. My question is not how to move the toggle button to the right (I can do that by adding float:right to the button), but why the navbar-toggler-left and right classes have that strange behavior.

Solution

  • There is an open issue for this:

    https://github.com/twbs/bootstrap/issues/21846

    A workaround is to use a placeholder instead of the navbar-brand

    <span class="navbar-text">&nbsp;</span>