title: Navbar automatically goes Mobile mode despite being on desktop
body: <p>I haven't been working on code for ages and I'm facing an issue that is getting me crazy cause I can't even start doing anything. I'm working on the very base of my website and when I try my page the navbar automatically goes on Mobile mode while I'm on desktop.</p>
  
  <p>I tried on Chrome and Firefox with the same results : a shrinked navbar on full-size page (it's not even working correctly as it's not the good size). Reducing the window's size will make the mobile navbar work correctly but impossible to get a normal one.
  I've tried different styles of navbar from Codepen to see if my code was wrong but same problem. I even tried using Bootstrap 3 instead of 4 and the code gets even worst.
  This one for example is wrong : <a href="https://codepen.io/mmgolden/pen/JNewdL" rel="nofollow noreferrer">https://codepen.io/mmgolden/pen/JNewdL</a></p>
  
  <p>HTML Head :</p>
  
  <pre><code>  &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  
    &lt;script src="assets/js/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
  
    &lt;link href="assets/css/style.css" rel="stylesheet" type="text/css"&gt;
  </code></pre>
  
  <p>HTML Body :</p>
  
  <pre><code>&lt;body&gt;
  
       &lt;nav class="navbar navbar-toggleable-md navbar-light bg-faded"&gt;
      &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="nav-left"&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;a class="navbar-brand mx-auto" href="#"&gt;&lt;div id="logo"&gt;&lt;/div&gt;&lt;/a&gt;
  
      &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav ml-auto"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
          &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- Mobile --&gt;
      &lt;div class="collapse" id="navbarMobile"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Mobile Link&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="slider"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>       .slider {
           background: #333;
           height: 400px;
           width: 100%;
           }
  
  #logo {
    background: #ccc;
    width: 150px;
    height: 70px;
  }
  
  .navbar-toggler {
    margin-top: 15px;
  }
  
  @media screen and (min-width: 992px) {
    .navbar {
        height: 130px;
     }
    #logo {
      width: 260px;
      height: 120px;
      position: relative;
      bottom: -20px;
    }
    .navbar-light .navbar-nav .nav-link {
      padding-right: 75px;
    }
    #nav-left {
      padding-left: 30px;
    }
  }
  </code></pre>
  
  <p>Screenshot : <a href="https://ibb.co/KDFqfTH" rel="nofollow noreferrer">https://ibb.co/KDFqfTH</a>
  I need it it show up normally on desktop and shrink on mobile/tablet.
  Thanks for your time. </p>