Navbar & Css Color

public/css/style.css

 
 .navbar-default {
     transition: all .5s ease-in-out;
-    background-color: #f3f3f3;
+    background-color: #E5E7E9;
     padding-top: 28px;
     padding-bottom: 28px;
     -webkit-backface-visibility: hidden;
 .section-footer {
     padding-top: 60px;
     margin-top: 60px;
-    background: #f3f3f3;
+    background: #E5E7E9;
 }
 
 .section-footer ul {
 }
 
 footer {
-    background: #f3f3f3;
+    background: #E5E7E9;
     text-align: center;
     padding: 30px 0;
 }

src/components/shared/navBar.vue

           <!-- <li class="nav-item">
             <a class="nav-link active" @click="routerGoTo('/')">Home</a>
           </li>-->
-
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdown"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >Timeshare</a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">To Sell</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/timeshare/sell')"
+              >My Timeshare Weeks</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
+            </div>
+          </li>
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
               aria-expanded="false"
             >Properties</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Commercial/Search')"
+              >
                 <u class="color-b">Search</u> Commercial Properties
               </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
-                <u class="color-b">To Buy</u> Commercial Properties
-              </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Commercial/Sale')"
+              >
                 <u class="color-b">To Sell</u> Commercial Properties
               </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Commercial/Rental')"
+              >
                 <u class="color-b">To Rent</u> Commercial Properties
               </a>
               <hr />
+
               <a
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/property/Residential/Search')"
               >
                 <u class="color-b">Search</u> Residential Properties
               </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
-                <u class="color-b">To Buy</u> Residential Properties
-              </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Residential/Sale')"
+              >
                 <u class="color-b">To Sell</u> Residential Properties
               </a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Residential/Rental')"
+              >
                 <u class="color-b">To Rent</u> Residential Properties
               </a>
               <hr />
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">
-                <u class="color-b">My</u> Properties
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/list/Commercial/MyListings')"
+              >
+                <u class="color-b">My</u> Commercial Properties
               </a>
-            </div>
-          </li>
-
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Timeshare</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">To Sell</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/timeshare/sell')"
-              >My Timeshare Weeks</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
+                @click="routerGoTo('/property/list/Residential/MyListings')"
+              >
+                <u class="color-b">My</u> Residential Properties
+              </a>
             </div>
           </li>
+
+          <!--  <li class="nav-item">
+            <a class="nav-link" @click="routerGoTo('/contactus')">Contact</a>
+          </li>-->
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false"
-            >Residential</a>
+            >About</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')">About Us</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Search')"
-              >Search</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Rental')"
-              >To Rent</a>
-              <div
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Sale')"
-              >To Sell</div>
-              <div
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Residential/MyListings')"
-              >My Residential Properties</div>
-              <div
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Residential/All')"
-              >Admin Residential Properties</div>
+                @click="routerGoTo('/about/timeshare')"
+              >About Timeshare</a>
             </div>
           </li>
+
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false"
-            >Commercial</a>
+            >Login</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Search')"
-              >Search</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Rental')"
-              >To Rent</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Sale')"
-              >To Sell</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Commercial/MyListings')"
-              >My Commercial Properties</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Commercial/All')"
-              >Admin Commercial Properties</a>
+                @click="routerGoTo('/user/registeragency')"
+              >Agency</a>
             </div>
           </li>
           <li class="nav-item dropdown">
               >Property Types</a>
             </div>
           </li>
-          <!--  <li class="nav-item">
-            <a class="nav-link" @click="routerGoTo('/contactus')">Contact</a>
-          </li>-->
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >About</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')">About Us</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/about/timeshare')"
-              >About Timeshare</a>
-            </div>
-          </li>
-
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Login</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/user/registeragency')"
-              >Agency</a>
-            </div>
-          </li>
         </ul>
       </div>
       <button