much better css for nav items

resources/assets/sass/_helpers.scss

@@ -12,3 +12,9 @@
 		opacity: 0;
 	}
 }
+
+@media (max-width:767px){
+	.mobile-only {
+		display: none;
+	}
+}

resources/assets/sass/bootstrap-customizations/_navbar.scss

@@ -4,23 +4,13 @@
 	border-bottom: 1px solid $primary;
 
 	box-shadow: 0 -3px 8px rgba(black, 1);
-}
-
-.page-navbar .container {
-	align-items: stretch;
-}
 
-.navbar-collapse {
+	white-space: nowrap;
-	align-items: stretch;
 }
 
-.navbar-nav {
+.nav-link {
-	align-items: stretch;
+	padding: $sp1 $sp3;
-
+	display: inline-block;
-	li a {
-		display: inline-block;
-		padding: $sp1;
-	}
 }
 
 .dropdown-menu {

resources/views/layouts/main-nav.blade.php

@@ -35,7 +35,27 @@
             </a>
           </li>
         @else
-          <li class="nav-item dropdown">
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" href="{{ route('logout') }}"
+               onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+              {{-- this is some hack against CSRF - logout only via POST --}}
+              <i class="fa-sign-out fa-pr"></i>{{ __('Logout') }}
+            </a>
+          </li>
+
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" href="{{ route('user.edit') }}">
+              <i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
+            </a>
+          </li>
+
+          <li class="nav-item ml-1 d-md-none">
+            <a class="nav-link" href="{{ route('user.manage-oauth') }}">
+              <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
+            </a>
+          </li>
+
+          <li class="nav-item dropdown mobile-only">
             <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" v-pre>
               <i class="fa-user-circle-o fa-pr"></i>{{--
@@ -43,14 +63,12 @@
             </a>
 
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
+
               <a class="dropdown-item" href="{{ route('logout') }}"
                  onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                 {{-- this is some hack against CSRF - logout only via POST --}}
                 <i class="fa-sign-out fa-pr"></i>{{ __('Logout') }}
               </a>
-              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                @csrf
-              </form>
 
               <a class="dropdown-item" href="{{ route('user.edit') }}">
                 <i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
@@ -59,7 +77,12 @@
               <a class="dropdown-item" href="{{ route('user.manage-oauth') }}">
                 <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
               </a>
+
             </div>
+
+            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+              @csrf
+            </form>
           </li>
         @endif
       </ul>