More accurate navbar hovers.

Replaces the background gradient with accurate hovers roblox used at the time, also made the submenu a bit more accurate as well as fixing the text alignment.

public/css/2018.css

@@ -69,14 +69,13 @@ body {
 	color: #191919;
 	display: flex;
 	margin: 3px;
+	padding: 2px 5px;
+	float: none;
 	font-size: 16px;
     font-weight: 500;
 	line-height: 1.92857;
 	height: 28px;
 }
-.Redesign .smallnavbarbutton:hover {
-	background: transparent;
-}
 
 #alert, #success {
 	top: 40px;
@@ -165,10 +164,6 @@ body {
     background-position: -28px -475px;
 }
 
-.navbarbuttoncontainer li:hover {
-	background: none;
-  }
-
 .smallnavbarbutton:nth-child(6):before {
     content: '';
     background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
@@ -203,7 +198,7 @@ body {
 	margin: 0;
 	width: 100%;
 }
-.subbar {
+.mySubmenuFixed.Redesign {
 	top: 0;
 	height: 0;
 	width: 0;
@@ -290,7 +285,7 @@ body {
 	width: 30px;
 	height: 30px;
 }
-#logo_full img {
+#logo_full .btn-logo {
 	padding: 5px 0;
 	max-width: 120px;
 	height: 30px;
@@ -308,12 +303,16 @@ body {
 	height: 30px;
 	float: left;
 }
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
+	background: none;
+}
 
 #NavigationRedesignBannerContainer p {
 	color: #fff;
 }
 
-#logo_full, #logo_full img {
+#logo_full, #logo_full .btn-logo {
 	height: 30px;
 }
 
@@ -537,7 +536,7 @@ iframe {
 	#smallnav_open {
 		display: none;
 	}
-	.subbar {
+	.mySubmenuFixed {
 		display: block;
 	}
 	#logo_full img, #logo_full {

public/css/app.css

@@ -77,10 +77,6 @@
   text-align: center;
 }
 
-.navbarbuttoncontainer li:hover {
-  background: linear-gradient(180deg, rgb(255,255,255,.3), transparent);
-}
-
 #alert {
   background: linear-gradient(#f07575 10%, #de2323 100%);
 }
@@ -101,7 +97,7 @@
   display: inline-block;
   float: left;
 }
-#logo_full, #logo_full img {
+#logo_full, #logo_full .btn-logo {
   width: 200px;
   Height: 35px;
 }
@@ -177,7 +173,7 @@
 .BannerRedesign {
   height: 35px;
   background: #114081;
-  background: linear-gradient(#1951A5 0%, #114081);
+  background-image: url(/images/RevisedHeader/bg-rbx_header.png);
   border-bottom: 1px solid #0A2246;
   position: fixed;
   width: 100%;
@@ -185,13 +181,31 @@
   top: 0;
   display: inline-flex;
 }
-.subbar {
+.btn-logo:hover, .navbarbuttoncontainer li:hover {
-  display: block;
+  background-image: url(/images/RevisedHeader/bg-main_menu_hover.png);
-  height: 25px;
+  background-size: auto 35px;
-  width: 100%;
+}
-  top: 36px;
+.smallnavbarbutton:hover {
+  background-image: url(/images/RevisedHeader/bg-sub_menu_hover.png);
+}
+div.mySubmenuFixed {
   position: fixed;
+  top: 68px;
+  width: 100%;
+  z-index: 10000;
+}
+div.mySubmenuFixed {
+  top: 36px;
   background: linear-gradient(#000 10%, #191919 100%);
+  height: 25px;
+}
+.mySubmenuFixed.Redesign {
+  position: fixed;
+  top: 35px;
+}
+.mySubmenuFixed.Redesign {
+  position: fixed;
+  top: 35px;
 }
 .subMenu {
   background: #A3514F;
@@ -248,6 +262,38 @@
   align-items: center;
 }
 
+#HeaderSignUp {
+  font-family: Arial;
+  font-weight: bold;
+  color: #fff;
+  font-size: 13px;
+  top: -8px;
+  position: relative;
+  *top: -6px;
+}
+#HeaderOr {
+  font-family: Arial;
+  font-weight: normal;
+  color: #9Ec3E7;
+  font-size: 13px;
+  top: -8px;
+  *top: -6px;
+  position: relative;
+  margin: 0 6px;
+}
+#headerLogin {
+  color: white;
+  background: url(/images/btn-login_dropdown.png) no-repeat;
+  display: inline-block;
+  height: 27px;
+  width: 62px;
+  position: relative;
+  cursor: pointer;
+}
+#headerLogin:hover {
+  background-position: 0 -54px;
+}
+
 iframe {
   width: 100%;
   height: 2000px;
@@ -390,7 +436,7 @@ iframe {
   position: relative;
 }
 #navbarlogincontainer {
-  margin-top: 9px;
+  margin-top: 5px;
   float: right;
   position: relative;
 }
@@ -416,10 +462,7 @@ iframe {
 .Redesign .smallnavbarbutton {
   font-size: 12px;
   padding: 5px;
-  line-height: 26px;
+  float: left;
-}
-.Redesign .smallnavbarbutton:hover {
-  background: linear-gradient(0deg,#191919 10%, #474747 100%);
 }
 
 .invisible,
@@ -493,8 +536,13 @@ body {
   /* Fallback for IE 11*/
   background-color: rgb(255, 255, 255);
 }
-.content_signup a[href="https://discord.gg/nudzQ7hkWY"]{
+.content_signup .hyperlink{
   display: block;
+  color: #0074bd;
+  transition: .25s all ease-in-out;
+}
+.content_signup .hyperlink:hover {
+  color: #32cfff;
 }
 .content_signup h1, .content_signup a, .content_signup p {
   text-align: center;

public/css/classicapp.css

@@ -40,9 +40,10 @@ html {
   Height: 40px;
 }
 
-.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
 	background: none;
-  }
+}
 
 .BannerRedesign {
   height: 40px;
@@ -112,6 +113,13 @@ html {
   padding-right: 5px;
   text-align: center;
   font-size: 15px;
+  line-height: 25px;
+  float: none;
+}
+.mySubmenuFixed.Redesign {
+  background: none;
+  height: 29px;
+  top: 44px;
 }
 
 @media (min-width: 1688px) {

public/css/classicappdark.css

@@ -40,9 +40,10 @@ html {
   Height: 40px;
 }
 
-.navbarbuttoncontainer li:hover, .Redesign .smallnavbarbutton:hover {
+.btn-logo:hover, .smallnavbarbutton:hover, .navbarbuttoncontainer li:hover {
+	background-image: none;
 	background: none;
-  }
+}
 
 .BannerRedesign {
   height: 40px;
@@ -112,6 +113,13 @@ html {
   padding-right: 5px;
   text-align: center;
   font-size: 15px;
+  line-height: 25px;
+  float: none;
+}
+.mySubmenuFixed.Redesign {
+  background: none;
+  height: 29px;
+  top: 44px;
 }
 
 @media (min-width: 1688px) {

resources/views/index.blade.php

@@ -14,5 +14,5 @@
 <br>
 <p><a alt="Sign Up button" href="{{ route('register') }}" >Sign Up</a> or <a alt="Log In button" href="{{ route('login') }}">Login</a></p>
 <br>
-<a href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
+<a class="hyperlink" href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a>
 @endsection

resources/views/layouts/app.blade.php

@@ -89,14 +89,14 @@
 
 <body>
     <div class="BannerRedesign">
-        <div ID="NavigationRedesignBannerContainer" class="BannerCenterContainer">
+        <div id="NavigationRedesignBannerContainer" class="BannerCenterContainer">
             @auth
             @switch (Auth::user()->settings->theme)
             @case(2)
             <a id="smallnav_open"></a>
             <script>
             function third() {
-                document.querySelector('.subbar.Redesign').classList.toggle('invisible_navbar');
+                document.querySelector('.mySubmenuFixed.Redesign').classList.toggle('invisible_navbar');
             }
             document.querySelector('#smallnav_open').addEventListener('click', third);
             </script>
@@ -104,7 +104,7 @@
             @default
             @endswitch
             @endauth
-            <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
+            <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" class = "btn-logo" src="{{ asset('img/MORBLOXlogo.png') }}"/></a>
             <a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
                     src="{{ asset('img/MORBLOXlogoshort.png') }}"/></a>
             <div class="navbarbuttoncontainer">
@@ -118,7 +118,7 @@
             </div>
             @guest
             <div id="navbarlogincontainer">
-                <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Login</a></p>
+                <p><a id="HeaderSignUp" href="{{ route('register') }}">Sign Up</a><span id="HeaderOr">or</span><span id="loginSpan"><a id="headerLogin" href="{{ route('login') }}"></a></span></p>
             </div>
             @else
             <div id="HeaderLoginButton" class="RightNav">
@@ -139,7 +139,7 @@
             </div>
         </div>
     </div>
-    <div class="subbar Redesign invisible_navbar">
+    <div class="mySubmenuFixed Redesign invisible_navbar">
         <div class="subMenu">
             <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() &&
                 count(Auth::user()->getFriendRequests()))