Navbar Logo fixed center and top

Question

I have a navbar for bootstrap 4 and the nav-brand centered on computer window, but it will moving to dropdown when expand the toggle on mobile. Does there any way to make the brand fixed on top and center?

my navbar code on html:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" 
 aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-start" id="navbarNavDropdown">
   <ul class="navbar-nav">
      <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data- 
        toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i 
        class="fas fa-store mr-3"></i>Product
         </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="...">..</a>
    </div>
  </li>

    <li class="nav-item active">
      <a class="nav-link" href="/" style="color: papayawhip"><i class="fas fa-home mr-3"></i>Home 
      <span class="sr-only">(current)</span></a>
    </li>
    </ul>
  </div>

  <a class="navbar-brand mx-auto" href="/"><img src="....." style="max-height: 60px" /></a>


  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav"><li class="nav-item">
        <a>...</a>
    </li>
  
    </ul>
   </div>
</nav>

your brand is inside the navbar collapse div, try putting it before the button tag — Cj Oyales

Cj Oyales Cj Oyales · Accepted Answer · 2020-08-13T19:10:26

try doing this so the navbar-brand

<a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

so the navbar-brand is outside the navbarNavDropdown

Navbar Logo fixed center and top

1 Answers