Bottom border color in navbar.

2 files changed, 30 insertions, 4 deletions

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index f1bc1f8..f51d2fa 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -43,6 +43,32 @@
 			margin-left: -10px;
 		}
 	}
+	/**
+	 * ## Bottom Border Color in Navbar
+	 */
+	@media (min-width: 993px) {
+		.navbar-nav > li {
+		  position: relative;
+		}
+		.navbar-nav .active a:not(.dropdown-item)::before{
+		  border-bottom: 5px solid #f07206;
+		  bottom: -18px;
+		  content: " ";
+		  left: 0;
+		  position: absolute;
+		  right: 0;
+		}
+	}
+	@media (max-width: 992px) {
+		#main-menu > li.active {
+			text-decoration: underline !important;
+			/*
+			text-decoration-color: theme-color(primary);
+			text-decoration: none !important;
+			border-bottom: 2px solid theme-color(primary);
+			*/
+		}
+	}
 	</style>
 
 
diff --git a/resources/views/snippets/navbar.blade.php b/resources/views/snippets/navbar.blade.php
index c57b1d8..e226d0b 100644
--- a/resources/views/snippets/navbar.blade.php
+++ b/resources/views/snippets/navbar.blade.php
@@ -14,13 +14,13 @@
 
 <div id="navbarNavDropdown" class="collapse navbar-collapse">
 	<ul id="main-menu" class="navbar-nav ml-auto flex-column-sm">
-		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4013" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4013 nav-item">
+		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4013" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4013 nav-item @if( Request::route()->getName() == 'index' ) {{ 'active' }} @endif">
 			<a title="Startseite" href="{{ env('APP_URL') }}" class="nav-link">Startseite</a>
 		</li>
-		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4018 nav-item">
+		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4018 nav-item @if( str_contains(Request::route()->getName(), 'angebote') ) {{ 'active' }} @endif">
 			<a title="Suchmaschine für Sonderangebote" href="{{ route('angebote_index') }}" class="nav-link">Sonderangebote</a>
 </li>
-		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4017 nav-item">
+		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4017 nav-item @if( str_contains(Request::route()->getName(), 'cocktail') ) {{ 'active' }} @endif">
 			<a title="Suchmaschine für Cocktails" href="{{ route('cocktail_index') }}" class="nav-link">Cocktails</a>
 </li>
 		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4014" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4014 nav-item">
@@ -30,7 +30,7 @@
 			<a title="Erfahre mehr" href="{{ route('angebote_index') }}/#erfahremehr" class="nav-link">Erfahre mehr</a>
 		</li-->
 		<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-4015" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4015 nav-item">
-			<a title="Über mich" href="https://www.fuselkoenig.de/ueber-diesen-blog/" class="nav-link">Über mich</a>
+			<a title="Über diese Seite" href="https://www.fuselkoenig.de/ueber-diesen-blog/" class="nav-link">Über diese Seite</a>
 		</li>
 	</ul>
 </div>