Changed main nav styling

2 files changed, 84 insertions, 35 deletions

diff --git a/assets/css/creative.css b/assets/css/creative.css
index 76f1049..d7f0474 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -65,8 +65,6 @@ padding-top: 200px;
 }
 
 
-
-
 .navbar-default .navbar-header .navbar-brand {
     text-transform: uppercase;
     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
@@ -103,56 +101,91 @@ padding-top: 200px;
     background-color: transparent;
 }
 
-@media(min-width:768px) {
-    .navbar-default {
+.navbar-default .dropdown-menu{
+    padding: 0;
+}
+
+.navbar-default .dropdown-menu li a{
+    padding: 10px;
+}
+
+.navbar-default .dropdown-submenu .dropdown-menu {
+    margin: 0;
+}
+
+/*.navbar-default .dropdown-submenu .dropdown-menu li a {
+    padding: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin: 0;
+}*/
+
+
+footer .navbar-default {
+        border-color: rgba(255,255,255,.3);
+        background-color: #333333;
+}
+
+footer .navbar-default .nav > li>a,
+footer .navbar-default .nav>li>a:focus {
+    color: rgba(255,255,255,.7);
+}
+
+footer .navbar-default .nav > li>a:hover,
+footer .navbar-default .nav>li>a:focus:hover {
+    color: #fff;
+}
+
+footer .navbar-default .affix {
+    border-color: rgba(34,34,34,.05);
+    background-color: #fff;
+}
+
+footer .navbar-default .affix .nav > li>a,
+footer .navbar-default .affix .nav>li>a:focus {
+    color: #222;
+}
+
+/*@media(min-width:768px) {
+    footer .navbar-default {
         border-color: rgba(255,255,255,.3);
         background-color: #333333;
     }
 
-    .navbar-default .navbar-header .navbar-brand {
+    footer .navbar-default .navbar-header .navbar-brand {
         color: rgba(255,255,255,.7);
     }
 
-    .navbar-default .navbar-header .navbar-brand:hover ,
-    .navbar-default .navbar-header .navbar-brand:focus {
+    footer .navbar-default .navbar-header .navbar-brand:hover ,
+    footer .navbar-default .navbar-header .navbar-brand:focus {
         color: #fff;
     }
 
-    .navbar-default .nav > li>a,
-    .navbar-default .nav>li>a:focus {
+    footer .navbar-default .nav > li>a,
+    footer .navbar-default .nav>li>a:focus {
         color: rgba(255,255,255,.7);
     }
 
-    .navbar-default .nav > li>a:hover,
-    .navbar-default .nav>li>a:focus:hover {
+    footer .navbar-default .nav > li>a:hover,
+    footer .navbar-default .nav>li>a:focus:hover {
         color: #fff;
     }
 
-    .navbar-default.affix {
+    footer .navbar-default .affix {
         border-color: rgba(34,34,34,.05);
         background-color: #fff;
     }
 
-    .navbar-default.affix .navbar-header .navbar-brand {
+    footer .navbar-default .affix .navbar-header .navbar-brand {
         font-size: 14px;
-        /*color: #f05f40;*/
-    }
-
-    .navbar-default.affix .navbar-header .navbar-brand:hover,
-    .navbar-default.affix .navbar-header .navbar-brand:focus {
-        /*color: #eb3812;*/
     }
 
-    .navbar-default.affix .nav > li>a,
-    .navbar-default.affix .nav>li>a:focus {
+   
+    footer .navbar-default .affix .nav > li>a,
+    footer .navbar-default .affix .nav>li>a:focus {
         color: #222;
     }
-
-    .navbar-default.affix .nav > li>a:hover,
-    .navbar-default.affix .nav>li>a:focus:hover {
-        /*color: #f05f40;*/
-    }
-}
+}*/
 
 
 header {
diff --git a/index.html b/index.html
index d613c42..01e3f5c 100644
--- a/index.html
+++ b/index.html
@@ -41,10 +41,10 @@
 			<div class="collapse navbar-collapse"
 				 id="bs-example-navbar-collapse-1">
 				<ul class="nav navbar-nav navbar-right">
-					<li><a href="user_solutions.html">Solutions Page</a></li>
+					<!--<li><a href="user_solutions.html">Solutions Page</a></li>
 					<li><a href="user_profile_alt.html">Profile Page</a></li>
 					<li><a href="questions.html">Questions Page</a></li>
-					<li><a href="exams.html">Exams Pages</a></li>
+					<li><a href="exams.html">Exams Pages</a></li>-->
 
 					<li class="dropdown">
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
@@ -62,8 +62,19 @@
 							<li><a href="#">Fourth Year</a></li>
 						</ul>
 					</li>
-					<li><a href="#">Register</a></li>
 					<li><a href="#">Log In</a></li>
+					<li><a href="#">Register</a></li>
+					<li class="dropdown">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>
+						<ul class="dropdown-menu">
+							<li><a tabindex="-1" href="user_solutions.html">Solutions Page</a></li>
+							<li><a href="user_profile_alt.html">Profile Page</a></li>
+							<li><a href="questions.html">Questions Page</a></li>
+							<li><a href="exams.html">Exams Pages</a></li>
+						</ul>
+
+					</li>
+					
 
 					<!--<li id="header"><header><a href="#"><img src="assets/images/logo.png"></a></header></li> &ndash;&gt;-->
 				</ul>
@@ -116,7 +127,7 @@
 	</header>
 
 	<footer>
-		<div class="navbar navbar-default navbar-fixed-bottom">
+		<nav class="navbar navbar-default navbar-fixed-bottom">
 			<div class="container-fluid">
 				<div class="navbar-collapse collapse" id="footer-body">
 					<ul class="nav navbar-nav">
@@ -135,14 +146,19 @@
 				</div>
 
 			</div>
-		</div>
+		</nav>
 	</footer>
 
-
-
-
 	<script>
 		$(document).ready(function() {
+
+			$(".dropdown").hover(function(){ 
+  				$(".dropdown-toggle", this).trigger("click"); 
+			});
+
+			$(".dropdown-toggle").click(function() {
+		        $(this).next(".dropdown-menu").fadeToggle(200);
+		    });
 		 
 			// For the Second level Dropdown menu, highlight the parent	
 			$( ".dropdown-menu" )