title: Drop down nav won't render all options on mobile screen
body: <p>On this website: <a href="https://videogamestore.best" rel="nofollow noreferrer">https://videogamestore.best</a>, my nav menu will not display all the game platforms on mobile. </p>
  
  <p>However, when I minimize my desktop window, to say, 300px, the nav menu displays all the options like it's supposed to. </p>
  
  <p>This leaves me unsure of what to do. </p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"&gt;
              &lt;div class="container"&gt;
                  &lt;a href="/"&gt;&lt;img id="navbar-logo" src="{{ asset('storage/images/gamer_logo2.png') }}" alt="Gamer logo"&gt;&lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div style="z-index: 99" class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
  
                      &lt;!-- Right Side Of Navbar --&gt;
                      &lt;ul class="navbar-nav ml-auto"&gt;
                          &lt;!-- Authentication Links --&gt;
                          @guest
                              &lt;li class="{{ Request::is('playstation') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('playstation') }}"&gt;{{ ('Playstation') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('xbox') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('xbox') }}"&gt;{{ ('Xbox') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('nintendo') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('nintendo') }}"&gt;{{ ('Nintendo') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('pc') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('pc') }}"&gt;{{ ('PC') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('login') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('login') }}"&gt;{{ __('Login') }}&lt;/a&gt;
                              &lt;/li&gt;
                              @if (Route::has('register'))
                                  &lt;li class="{{ Request::is('register') ? 'page-item active' : '' }} nav-item"&gt;
                                      &lt;a class="nav-link" href="{{ route('register') }}"&gt;{{ __('Register') }}&lt;/a&gt;
                                  &lt;/li&gt;
                              @endif
                              &lt;li class="nav-item"&gt;
                                  &lt;a href="{{ route('cart') }}"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;/li&gt;
                              @if(Cart::count() &gt; 0 &amp;&amp; Cart::count() &lt; 10)
                                  &lt;div class="cart-count-bg"&gt;&lt;span style="margin-left: 0.51rem;"&gt;&lt;b&gt;{{ Cart::count() }}&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
                              @elseif(Cart::count() &gt; 9)
                                  &lt;div class="cart-count-bg"&gt;&lt;span style="margin-left: 0.2rem;"&gt;&lt;b&gt;{{ Cart::count() }}&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
                              @endif
                          @else
                              &lt;li class="{{ Request::is('playstation') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('playstation') }}"&gt;{{ ('Playstation') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('xbox') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('xbox') }}"&gt;{{ ('Xbox') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('nintendo') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('nintendo') }}"&gt;{{ ('Nintendo') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="{{ Request::is('pc') ? 'page-item active' : '' }} nav-item"&gt;
                                  &lt;a class="nav-link" href="{{ route('pc') }}"&gt;{{ ('PC') }}&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item dropdown"&gt;
                                  &lt;a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre&gt;
                                      {{ Auth::user()-&gt;name }} &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/a&gt;
  
                                  &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"&gt;
                                      &lt;a class="dropdown-item" href="{{ route('logout') }}"
                                         onclick="event.preventDefault();
                                                       document.getElementById('logout-form').submit();"&gt;
                                          {{ __('Logout') }}
                                      &lt;/a&gt;
  
                                      &lt;form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"&gt;
                                          @csrf
                                      &lt;/form&gt;
  
                                      &lt;li&gt;
                                          &lt;a href="{{ route('cart') }}"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;/li&gt;
                                      @if(Cart::count() &gt; 0 &amp;&amp; Cart::count() &lt; 10)
                                          &lt;div class="cart-count-bg"&gt;&lt;span style="margin-left: 0.51rem;"&gt;&lt;b&gt;{{ Cart::count() }}&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
                                      @elseif(Cart::count() &gt; 9)
                                          &lt;div class="cart-count-bg"&gt;&lt;span style="margin-left: 0.2rem;"&gt;&lt;b&gt;{{ Cart::count() }}&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
                                      @endif  
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          @endguest
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>In short, my nav bar isn't responsive despite what my minimized browser window suggests. </p>
  
  <p>Can anyone help me identify the solution here?</p>
  
  <p>Thank you</p>