Showing collapsible items in navbar alters the navbar design

Question

I'm trying to create a navbar with some collapsible items and a logo and a button that should always be visibile. I want my button for showing the collapsible items to be on the left, before the logo, and the always visible button on the right, so I tried with this code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#userNavbarContent"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" routerLink="/">Logo</a>
        <div class="collapse navbar-collapse" id="userNavbarContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">4</a>
            </li>
          </ul>
        </div>
        <button class="btn btn-outline-light mr-0">Logout</button>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

The problem is that whenever I press the toggler, it pushes away the logo and the Logout button. How can I fix that?

score 0 · Accepted Answer · answered Dec 15 '19 at 16:16

Use the flexbox order to re-order the nav links on mobile classes...

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#userNavbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">Logo</a>
        <div class="collapse navbar-collapse order-last order-lg-0" id="userNavbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">4</a>
                </li>
            </ul>
        </div>
        <button class="btn btn-outline-light mr-0">Logout</button>
    </div>
</nav>

Demo: https://codeply.com/p/2qbQ3zYwai

Related: Bootstrap 4 align navbar items to the right

Showing collapsible items in navbar alters the navbar design

1 Answers1