title: how to adjust the content of my navbar when the screen resolution changes
body: <p>I have a navbar with a logo and title of my page, I need the title is in the middle and the logo on the left</p>
  
  <p>but I have a problem, this does not fit when the screen resolution changes, the logo hides the title of my page</p>
  
  <p>My logo must be floating between the navbar and the content of my page</p>
  
  <p>How can I adjust the logo and title to change when changing the screen resolution?</p>
  
  <pre><code>&lt;nav class="navbar navbar-custom"&gt;
    &lt;img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt=""&gt;
    &lt;a class="navbar-brand title-page mx-auto"&gt;Title page&lt;/a&gt;
  &lt;/nav&gt;
  
  .navbar-custom {
    background-color: #A1241B;
    height: 100px;
  }
  
  .logo {
    display: inline;
    position: absolute;
    top: 1em;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/alexcortes53/egrbmcwp/5/" rel="nofollow noreferrer">jsfiddle</a></p>