Top-bar subnav items & image will expand properly

All list items were given a nav-item class so they can
be properly refered to with CSS. Items without dropdown
also got the no-dropdown class.

Subnav of first four top-nav list items were given a
100% width so sub-sub-nav can be expanded and reached.

diff --git a/functions.php b/functions.php
index 2276a9c..6c200cf 100644 (file)
--- a/functions.php
+++ b/functions.php
@@ -53,12 +53,12 @@ function glm_page_menu($parent = 0, $class = '', $subnav = false, $navImg = null
         }
         $childs = get_pages('child_of=' . $page->ID);
         if (count($childs) > 0) {   
-            echo '<li class="has-dropdown drop">'."\n";
+            echo '<li class="has-dropdown nav-item drop">'."\n";
             echo '<a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a>'."\n";
             echo glm_page_menu($page->ID, 'sub-menu dropdown', true, $navImg);
             echo '</li>'."\n";
         } else {
-            echo '<li><a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a></li>'."\n";
+            echo '<li class="no-dropdown nav-item"><a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a></li>'."\n";
         }
         
     }

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 34ebaec..c41a804 100644 (file)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -663,7 +663,7 @@ nav.top-bar .top-bar-section > ul > li {
     background: black;
     color: white;
 }
-header .top-bar .top-bar-section ul > li > ul > li {
+#page-header .top-bar .top-bar-section ul > li > ul > li {
     height: 36px;
     font-size: 15px;
 }
@@ -707,10 +707,15 @@ nav.top-bar .top-bar-section > ul > li.has-dropdown:hover {
   z-index: 9999;
   padding-bottom: 2px;
 }
+nav.top-bar .top-bar-section > ul > li.nav-item:nth-child(-n+4) > ul > li.nav-item {
+    width: 100%;
+    float: left;
+    text-align:left;
+}
 nav.top-bar .top-bar-section .has-dropdown:nth-child(n+4) .dropdown li.has-dropdown > a::after {
     content: "";
 }
-nav.top-bar .top-bar-section .has-dropdown:nth-child(n+4) .dropdown li.has-dropdown > a::before {
+nav.top-bar .top-bar-section .nav-item:nth-child(n+4) .dropdown li.has-dropdown > a::before {
   border: medium none;
   content: "« ";
   right: 5px;
@@ -729,6 +734,8 @@ nav.top-bar .top-bar-section > ul > li.drop:nth-child(n+4) > ul.dropdown {
     .nav-img {
         right: 20px;
         position: absolute;
+        background: transparent !important;
+        z-index: 2;
     }
 }
 nav.top-bar .top-bar-section > ul > li.drop:nth-child(n+4) > ul.dropdown li ul {