How do i place a logo in between text on the navbar?


#1

Hi everyone. I just got to know about Bootstrap about 3days ago and cant let go. In my process of web development so far its good but at the moment I got stuck at the navbar. According to the PSD file, the navigation is in the center and the logo is placed in-between the navigation text in the navbar. How do I achieve that? Maybe some codes to add? Thanks for helping in advance.

:slightly_smiling:

Below is a sample screenshot

Here is my code:

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
          <div class="navbar-header">
              
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle Navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="#">
              <div class="logo">
              <img src="img/logo.png" />
              </div>
                  </a>
          
          
            </div>
          
          <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><a href="#">HOME</a></li>
              <li><a href="photo">PHOTOAPP</a></li>
              <li><a href="design">DESIGN</a></li>
              <li><a href="download">DOWNLOAD</a></li>
              </ul>
          </div>
          </div>
      </div>


#2

@denny001,
Have you tried....

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
          <div class="navbar-header">
              
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle Navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              
          
          
            </div>
          
          <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><a href="#">HOME</a></li>
              <li><a href="photo">PHOTOAPP</a></li>
              <li><a class="navbar-brand" href="#">
              <div class="logo">
              <img src="img/logo.png" />
              </div>
                  </a>
              </li>
              <li><a href="design">DESIGN</a></li>
              <li><a href="download">DOWNLOAD</a></li>
              </ul>
          </div>
          </div>
      </div>