title: Bootstrap 4 navbar overlapping on mobile
body: <p>I am making a project at school and I am using Bootstrap 4 and I am pretty new to it.</p>
  
  <p>I have my navbar brand as an image centered in the middle of the navbar. But when I switch over to a smaller screen some of the navbar items get moved down under the navbar. And that also creates a space between the carousel and the navbar.</p>
  
  <p>I suspect that it is because of the "absolute" position of the navbar brand image.</p>
  
  <p>Here is a Jsfiddle: jsfiddle(dot)net/zdu9jv99/3/ I don't know why it isn't fully working.....
  (I can't post more than two links, that's why I have to do the (dot).)</p>
  
  <p>This is what it looks like on smaller displays.<a href="https://i.stack.imgur.com/fBDFi.png" rel="nofollow noreferrer"> Image that shows the overlapping</a>
  This is how it is supposed to look like.
  <a href="https://i.stack.imgur.com/tjTuw.png" rel="nofollow noreferrer">This is how it looks on bigger screens</a>
  Here is my html and css:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="sv"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Barber Shop&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- Icon --&gt;
      &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;
      &lt;!-- Font-Awesome Core CSS --&gt;
      &lt;link rel="stylesheet" href="assets/css/font-awesome.min.css"&gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;!-- Navigation --&gt;
          &lt;nav class="navbar navbar-dark bg-inverse navbar-static-top navbar-full" style="background-color: #d8c387 !important;"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="index.html"&gt;&lt;i class="fa fa-home icon-padding" aria-hidden="true"&gt;&lt;/i&gt;Hem&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="hittafrisor.html"&gt;&lt;i class="fa fa-map-marker icon-padding" aria-hidden="true"&gt;&lt;/i&gt;Hitta frisör&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-picture-o icon-padding" aria-hidden="true"&gt;&lt;/i&gt;Galleri&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2"&gt;
                          &lt;div class="navbar-brand"&gt;
                              &lt;a class="white-circle" href="index.html"&gt;
                                  &lt;img class="img-fluid" src="assets/images/barber-logo.png" alt="Logo"&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
  
                          &lt;ul class="nav navbar-nav float-md-right"&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-info icon-padding" aria-hidden="true"&gt;&lt;/i&gt;Om oss&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;&lt;i class="fa fa-phone icon-padding" aria-hidden="true"&gt;&lt;/i&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>    /* NAVBAR */
  .navbar {
      height: 58px;
      z-index: 2 !important;
  }
  
  .navbar-brand {
    display: inline-block;
    float: none;
    padding: 0;
    margin: 0 !important;
    overflow: visible;
  }
  
  .navbar-brand img {
      z-index: 3 !important;
  }
  
  .navbar-brand .white-circle {
    display: block;
    width: 161px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
  }
  
  .navbar {
    text-align: center;
  }
  
  .nav-link {
    color: #741833 !important;
  }
  
  /* NAVBAR FONT SIZE */
  .nav a{
    font-size: 17px;
  }
  </code></pre>
  
  <p>I have also uploaded the project to as site, if you want to look at the whole thing. If you have any other opinions or anything else feel free the critique me, I am sure that I have made some more mistakes. The site is cpt-keyhole.se (yes I know a strange name)</p>
  
  <p>It probably just is an easy thing that i have missed or misunderstood, so I would appreciate some your help. Thanks for your time!</p>