#889982 by Jeff Burn: Move secondary links to the header in Bartik.

8 files changed, 72 insertions, 49 deletions

diff --git a/themes/bartik/css/colors.css b/themes/bartik/css/colors.css
index 49fbce3fd..91595b4a8 100644
--- a/themes/bartik/css/colors.css
+++ b/themes/bartik/css/colors.css
@@ -12,7 +12,7 @@ body.overlay {
   background-color: #ffffff;
   color: #3b3b3b;
 }
-#navigation ul.links li.active-trail a {
+#main-menu ul.links li.active-trail a {
   background: #ffffff;
 }
 .tabs ul.primary li a.active {
@@ -45,6 +45,7 @@ a:active {
   background: #292929;
 }
 #header #name-and-slogan,
-#header #name-and-slogan a {
+#header #name-and-slogan a,
+#secondary-menu-links li a {
   color: #fffeff;
 }
diff --git a/themes/bartik/css/layout-rtl.css b/themes/bartik/css/layout-rtl.css
index 475ca156f..4ec5ce455 100644
--- a/themes/bartik/css/layout-rtl.css
+++ b/themes/bartik/css/layout-rtl.css
@@ -13,3 +13,7 @@
 .region-footer-fourthcolumn {
   float: right;
 }
+#secondary-menu {
+  left: 0;
+  right: auto;
+}
diff --git a/themes/bartik/css/layout.css b/themes/bartik/css/layout.css
index 650a7419f..04e4caf2a 100644
--- a/themes/bartik/css/layout.css
+++ b/themes/bartik/css/layout.css
@@ -3,7 +3,6 @@
 /* ---------- Basic Layout Styles ----------- */
 
 #header div.section,
-#navigation div.section,
 #featured div.section,
 #messages,
 #main,
@@ -14,6 +13,15 @@
   margin-left: auto;
   margin-right: auto;
 }
+#header div.section {
+  position: relative;
+}
+#secondary-menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 480px;
+}
 #content,
 .sidebar,
 .region-triptych-first,
diff --git a/themes/bartik/css/maintenance-page.css b/themes/bartik/css/maintenance-page.css
index f0631f442..eba85bf98 100644
--- a/themes/bartik/css/maintenance-page.css
+++ b/themes/bartik/css/maintenance-page.css
@@ -23,7 +23,6 @@ body.maintenance-page {
   width: auto;
 }
 .maintenance-page #header div.section,
-.maintenance-page #navigation div.section,
 .maintenance-page #messages,
 .maintenance-page #main {
   width: 700px;
diff --git a/themes/bartik/css/print.css b/themes/bartik/css/print.css
index 6e8531486..db6791dbb 100644
--- a/themes/bartik/css/print.css
+++ b/themes/bartik/css/print.css
@@ -17,7 +17,7 @@ body {
 }
 #sidebar-first,
 #sidebar-second,
-#navigation,
+.navigation,
 #toolbar,
 #footer-wrapper,
 .tabs,
diff --git a/themes/bartik/css/style-rtl.css b/themes/bartik/css/style-rtl.css
index a578c316c..045e8a9f7 100644
--- a/themes/bartik/css/style-rtl.css
+++ b/themes/bartik/css/style-rtl.css
@@ -77,13 +77,19 @@ ul.tips {
   margin-right: 10px;
 }
 
-/* --------------- Main Navigation ------------ */
+/* --------------- Main Menu ------------ */
 
-#navigation ul.links li.first {
+#main-menu ul.links li.first {
   padding-right: 2px;
   padding-left: 0;
 }
 
+/* --------------- Secondary Menu ------------ */
+
+#secondary-menu-links {
+  float: left;
+}
+
 /* ----------------- Content ------------------ */
 
 #block-system-main .submitted .user-picture img {
diff --git a/themes/bartik/css/style.css b/themes/bartik/css/style.css
index a7f3d46b9..fd7f9cbc3 100644
--- a/themes/bartik/css/style.css
+++ b/themes/bartik/css/style.css
@@ -250,13 +250,6 @@ ul.tips {
 #preview #preview-header a {
   color: #fff;
 }
-#header a:hover,
-#header a:focus {
-  color: #b5b7b9;
-}
-#header a:active {
-  color: #adb0bf;
-}
 #header #logo,
 #preview #preview-header #preview-logo {
   float: left; /* LTR */
@@ -381,24 +374,24 @@ ul.tips {
   display: none;
 }
 
-/* --------------- Main Navigation ------------ */
+/* --------------- Main Menu ------------ */
 
-#navigation {
+#main-menu {
   padding: 0 15px;
   clear: both;
 }
-#navigation a {
+#main-menu a {
   color: #d9d9d9;
   padding: 0.6em 1em 0.4em;
 }
-#navigation ul {
+#main-menu ul {
   padding: 2px 0;
 }
-#navigation ul.links {
+#main-menu ul.links {
   font-size: 105%;
   padding: 0.6em 0.6em 4px;
 }
-#navigation ul.links li a {
+#main-menu ul.links li a {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
@@ -412,31 +405,42 @@ ul.tips {
   -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 }
-#navigation ul.links li a:hover,
-#navigation ul.links li a:focus {
+#main-menu ul.links li a:hover,
+#main-menu ul.links li a:focus {
   background: #fff;
   background: rgba(255, 255, 255, 0.95);
 }
-#navigation ul.links li a:active {
+#main-menu ul.links li a:active {
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-#navigation ul.links li.active-trail a {
+#main-menu ul.links li.active-trail a {
   border-bottom: none;
 }
-.featured #navigation ul.links li.active-trail a {
+.featured #main-menu ul.links li.active-trail a {
   background: #f0f0f0;
   background: rgba(240, 240, 240, 1.0);
 }
-#navigation ul.links li {
+#main-menu ul.links li {
   display: inline;
   list-style-type: none;
   padding: 0.6em 0 0.4em;
 }
-#navigation ul.links li.first {
+#main-menu ul.links li.first {
   padding-left: 2px; /* LTR */
 }
 
+/* --------------- Secondary Menu ------------ */
+
+#secondary-menu-links {
+  float: right; /* LTR */
+  margin: 10px;
+}
+#secondary-menu-links a:hover,
+#secondary-menu-links a:focus {
+  text-decoration: underline;
+}
+
 /* ------------------- Main ------------------- */
 
 #main,
@@ -722,9 +726,6 @@ h1#page-title,
 #footer .block h2 {
   margin: 0;
 }
-#footer-wrapper ul#secondary-menu {
-  margin: 1em 0;
-}
 #footer-columns h2 {
   border-bottom: 1px solid #555;
   border-color: rgba(255,255,255,0.15);  
diff --git a/themes/bartik/templates/page.tpl.php b/themes/bartik/templates/page.tpl.php
index 1d487bdd2..1727dff6b 100644
--- a/themes/bartik/templates/page.tpl.php
+++ b/themes/bartik/templates/page.tpl.php
@@ -124,11 +124,11 @@
     <?php print render($page['header']); ?>
 
     <?php if ($main_menu): ?>
-      <div id="navigation"><div class="section clearfix">
+      <div id="main-menu" class="navigation">
         <?php print theme('links__system_main_menu', array(
           'links' => $main_menu,
           'attributes' => array(
-            'id' => 'main-menu',
+            'id' => 'main-menu-links',
             'class' => array('links', 'clearfix'),
           ),
           'heading' => array(
@@ -137,7 +137,24 @@
             'class' => array('element-invisible'),
           ),
         )); ?>
-      </div></div> <!-- /.section, /#navigation -->
+      </div> <!-- /#main-menu -->
+    <?php endif; ?>
+
+    <?php if ($secondary_menu): ?>
+      <div id="secondary-menu" class="navigation">
+        <?php print theme('links__system_secondary_menu', array(
+          'links' => $secondary_menu,
+          'attributes' => array(
+            'id' => 'secondary-menu-links',
+            'class' => array('links', 'clearfix'),
+          ),
+          'heading' => array(
+            'text' => t('Secondary menu'),
+            'level' => 'h2',
+            'class' => array('element-invisible'),
+          ),
+        )); ?>
+      </div> <!-- /#secondary-menu -->
     <?php endif; ?>
 
   </div></div> <!-- /.section, /#header -->
@@ -166,7 +183,6 @@
       </div></div> <!-- /.section, /#sidebar-first -->
     <?php endif; ?>
 
-
     <div id="content" class="column"><div class="section">
       <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
       <a id="main-content"></a>
@@ -217,25 +233,13 @@
         <?php print render($page['footer_secondcolumn']); ?>
         <?php print render($page['footer_thirdcolumn']); ?>
         <?php print render($page['footer_fourthcolumn']); ?>
-      </div><!-- /#footer-columns -->
+      </div> <!-- /#footer-columns -->
     <?php endif; ?>
 
-    <?php if ($page['footer'] || $secondary_menu): ?>
+    <?php if ($page['footer']): ?>
       <div id="footer" class="clearfix">
-        <?php print theme('links__system_secondary_menu', array(
-          'links' => $secondary_menu,
-          'attributes' => array(
-            'id' => 'secondary-menu',
-            'class' => array('links', 'clearfix'),
-          ),
-          'heading' => array(
-            'text' => t('Secondary menu'),
-            'level' => 'h2',
-            'class' => array('element-invisible'),
-          ),
-        )); ?>
         <?php print render($page['footer']); ?>
-    </div><!-- /#footer -->
+      </div> <!-- /#footer -->
     <?php endif; ?>
 
   </div></div> <!-- /.section, /#footer-wrapper -->