title: How to fix navbar-brand not to go down when toggle the button
body: <p>It goes well in desktop but I have a problem when in responsive mode</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header"&gt;
          &lt;nav class="navbar fixed-top navbar-expand-sm bg-warning"&gt;
              &lt;div class="container"&gt;
                  &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
                      &lt;ul class="navbar-nav"&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link active" href="#about"&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;a class="navbar-brand" href="#"&gt;My Project&lt;/a&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Took me for two days and I haven't figured it out yet.</p>