title: Bootstrap 4 menu positioning with image
body: <p>I'm using this template:</p>
  
  <p><a href="http://bootstrap4.guide/" rel="nofollow noreferrer">http://bootstrap4.guide/</a></p>
  
  <p>And I want to modify menu a bit, instead of having blue <em>Bootstrap 4</em> text, I'd like to have a image there. It's looking all fine until I look at mobile view.</p>
  
  <p>I'm expecting to have my image in the same place as the text:
  <a href="https://i.stack.imgur.com/o0HEZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0HEZ.png" alt="enter image description here"></a></p>
  
  <p>However my image happens to appear under hamburger menu:
  <a href="https://i.stack.imgur.com/qjz0H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qjz0H.png" alt="enter image description here"></a></p>
  
  <p>This is what I have at the moment:</p>
  
  <pre><code>&lt;nav id='topNav' className='navbar navbar-default navbar-fixed-top'&gt;
    &lt;div className='container'&gt;
      &lt;button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'&gt;
        &amp;#9776;
      &lt;/button&gt;
      &lt;a className='navbar-brand page-scroll' href='#first'&gt;&lt;img src='logo.png'/&gt;&lt;/a&gt;
      &lt;div className='collapse navbar-toggleable-sm' id='collapsingNavbar'&gt;
        &lt;ul className='nav navbar-nav'&gt;
          &lt;li className='nav-item'&gt;
            &lt;a className='nav-link page-scroll' href='#one'&gt;Cards&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className='nav-item'&gt;
            &lt;a className='nav-link page-scroll' href='#two'&gt;Flexbox&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className='nav-item'&gt;
            &lt;a className='nav-link page-scroll' href='#three'&gt;5 Tiers&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className='nav-item'&gt;
            &lt;a className='nav-link page-scroll' href='#four'&gt;More&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul className='nav navbar-nav pull-xs-right'&gt;
          &lt;li className='nav-item'&gt;
            &lt;a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'&gt;About&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I've just replaced <em>Bootstrap 4</em> with this img tag: <code>&lt;img src='logo.png'/&gt;</code>. I'm quite new to bootstrap, if someone would help me to figure out how to sort this out, that'd be great.</p>