0

I'm trying to place a logo on my navbar, right in the center. The navbar automatically stretches to be the same size as the image which I don't want. How do I put a logo on my navbar that overlaps/doesn't stretch the navbar? 


        <nav class="navbar navbar-expand-lg navbar-light bg-light">

  <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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto ">
      <li class="nav-item active ">
        <a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      <div class="navbar-brand">
        <img src = "test-logo.png" height="250" width="250" alt="test logo">
      </div>

      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>


    </ul>



  </div>
</nav>
p4rad1s3
  • 31
  • 1
  • Please refer to this link it will help you, https://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar – Ahsan Nadeem Mar 05 '20 at 06:07
  • Does this answer your question? [Centering brand logo in Bootstrap 3 Navbar](https://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar) – Ahsan Nadeem Mar 05 '20 at 06:43
  • I'm trying what's being advised on that page and it's still not working. – p4rad1s3 Mar 05 '20 at 06:45

1 Answers1

1

Hello here is the example code for your problem..

.navbar-brand {margin: 0 30px;padding: 0;}
.navbar-brand img {max-height: 68px;}
nav.navbar .navbar-nav li a {
  padding: 0 20px;
  line-height: 68px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <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>
  <div class="navbar-brand d-block d-md-none">
          <img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" width="60px" alt="logo" />
        </div>
        
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto ">
        <li class="nav-item active">
          <a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">Services</a>
        </li>
  
        <div class="navbar-brand d-none d-md-block">
          <img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" alt="logo" />
        </div>
  
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">career</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
  
  
      </ul>
  
  
  
    </div>
  </nav>
  
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Deepak Jadon
  • 108
  • 6