title: Bootstrap 4 Responsive Center Logo Between Navbar Links
body: <p>i need boostrap 4 navbar with 4 links and centered logo. 2 links on left side and 2 links on right side responsive</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*------------- navigation -------------*/
  .site-logo {
   width: 100px;
   padding: 5px;
  }
  
  .navbar .flex-1 {
      flex: 1;
      flex-basis: 100%;
  }
  nav#main-header {
   position: fixed;
   z-index: 9999;
   top: 0;
   left: 0;
   right: 0;
  }
  nav ul {
   z-index: 10;
   height: 48px;
   position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="assets/css/99adv.css"&gt;
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;nav class="navbar sticky-top navbar-expand-md navbar-dark main-nav" style="background-color: #4F78F1" id="main-header"&gt;
      &lt;div class="container"&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse w-100"&gt;
              &lt;ul class="nav navbar-nav m-auto"&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;features&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="logo"&gt;
                     &lt;a class="nav-link" href="#"&gt; &lt;img src="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" class="site-logo" alt=""&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Register&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;More&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
  &lt;/p&gt;
  &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
  &lt;/p&gt;
  &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
  &lt;/p&gt;
  &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
  &lt;/p&gt;   
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i need like bellow images</p>
  
  <p>desktop view
  <a href="https://i.stack.imgur.com/DFMJ1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DFMJ1.jpg" alt="enter image description here"></a></p>
  
  <p>mobile view
  <a href="https://i.stack.imgur.com/8i8bR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8i8bR.png" alt="enter image description here"></a></p>
  
  <p>mobile expended menu
  <a href="https://i.stack.imgur.com/tNNbF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tNNbF.png" alt="enter image description here"></a></p>