added another nav menu for header links

diff --git a/css/app.css b/css/app.css
index 2817c0c..53c28c9 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6606,6 +6606,18 @@ header {
 #rate {
   margin-bottom: 20px; }
 
+#linksNav {
+  background: #043867;
+  height: 48px;
+  position: relative;
+  top: 15px; }
+
+#headerLinks > ul#menu-menu-2 > li::before {
+  margin-top: 13px; }
+
+#headerLinks > ul#menu-menu-2 > li {
+  padding: 0px 15px; }
+
 @media screen and (max-width: 1024px) {
   main.page-front {
     padding: 0; } }
@@ -7310,9 +7322,6 @@ header .searchform input[type="submit"]:hover, header .searchformHeader input[ty
 #magnifying-glass {
   padding: 0px; }
 
-.socialHeader {
-  width: 100%; }
-
 #ui-datepicker-div {
   display: none; }
 

diff --git a/header.php b/header.php
index 4d75672..08f360d 100644 (file)
--- a/header.php
+++ b/header.php
@@ -19,11 +19,15 @@
                                 <div class="small-11 small-centered text-center show-for-medium-down">
                                     <a href="<?php bloginfo('url'); ?>"><img id="head-logo" src="<?php echo get_template_directory_uri(); ?>/assets/sault-saint-marie-logo.png"></a>
                                 </div>
-                                <div class="socialHeader right show-for-large-up large-5 columns">
-                                    <ul>
-                                        <li><a href="<?php bloginfo('url'); ?>/contact-us/contact/">Contact</a></li>
-                                        <li><a href="<?php bloginfo('url'); ?>/media/">Media</a></li>
-                                        <li><a href="<?php bloginfo('url'); ?>/groups-and-conferences/">Group & Conferences</a></li>
+                               
+                                <div class="socialHeader right show-for-large-up large-12 columns">
+                                   
+                                    <ul id="socialLinks">
+                                        <li><nav id="linksNav" class="top-bar text-center" data-topbar role="navigation">
+                                        <section id="headerLinks" class="top-bar-section">
+                                            <?php header_top_bar(); ?>
+                                        </section>
+                                    </nav></li>
                                         <li class="face"><a target="_blank" href="https://www.facebook.com/ilovethesoo/"></a></li>
                                         <li class="twit"><a target="_blank" href="https://twitter.com/VisitTheSault/"></a></li>
                                         <li id="search-icon"><a class="magnifying-glass" href="#"></a></li>
@@ -31,7 +35,9 @@
                                             <input id="headerSearch" class="search-input" placeholder="SEARCH" value="" name="s" type="text">
                                             <input id="input" class="search-button" name="searchButton" value="Search" type="submit">
                                             <a id="magnifying-glass" class="show-for-large-up" href="#"></a></form></li>
+                                    
                                     </ul>
+                                    
                                 </div>
                             </div>
                         </div>

diff --git a/js/app.js b/js/app.js
index fef1813..32be97b 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -19,7 +19,7 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
-    $('.top-bar-section').find('ul.sub-menu.dropdown').each(function () {
+    $('.top-bar-section, .top-bar-section-2').find('ul.sub-menu.dropdown').each(function () {
         var menuImg = $(this).parent('li').prop('id');
         var menuNum = menuImg.match(/\d+/)[0];
         var menuImgSrc = 'img_for_menu_' + menuNum;
@@ -29,6 +29,7 @@ $(document).ready(function () {
             $(this).find('li.image-placeholder').parent('ul').addClass('no-image-subul');
             $(this).find('li.image-placeholder').remove();
         }
+        
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
 
@@ -199,6 +200,16 @@ var extraDay, end, arrival, currentDate, currentDate2, requiredDate, requiredDat
     $(".menu-icon").on("click", function () {
        window.scrollTo(0,0);
     });
-    
+    var $topMenu = $("ul#menu-menu-2 li > a");
+    $("#headerLinks").children("ul#menu-menu-2").children("li").each(function () { 
+        $($topMenu).css("background", "none").css("font-size", "16px");
+        $($topMenu).mouseenter( function () {
+           $(this).css("background", "white") ;
+        });
+          $($topMenu).mouseout( function () {
+           $(this).css("background", "none") ;
+        });
+        $($topMenu).css("padding", "10px 5px");
+    });
 
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 8ca5317..900253a 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -10,7 +10,7 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
-    $('.top-bar-section').find('ul.sub-menu.dropdown').each(function () {
+    $('.top-bar-section, .top-bar-section-2').find('ul.sub-menu.dropdown').each(function () {
         var menuImg = $(this).parent('li').prop('id');
         var menuNum = menuImg.match(/\d+/)[0];
         var menuImgSrc = 'img_for_menu_' + menuNum;
@@ -20,6 +20,7 @@ $(document).ready(function () {
             $(this).find('li.image-placeholder').parent('ul').addClass('no-image-subul');
             $(this).find('li.image-placeholder').remove();
         }
+        
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
 
@@ -190,6 +191,16 @@ var extraDay, end, arrival, currentDate, currentDate2, requiredDate, requiredDat
     $(".menu-icon").on("click", function () {
        window.scrollTo(0,0);
     });
-    
+    var $topMenu = $("ul#menu-menu-2 li > a");
+    $("#headerLinks").children("ul#menu-menu-2").children("li").each(function () { 
+        $($topMenu).css("background", "none").css("font-size", "16px");
+        $($topMenu).mouseenter( function () {
+           $(this).css("background", "white") ;
+        });
+          $($topMenu).mouseout( function () {
+           $(this).css("background", "none") ;
+        });
+        $($topMenu).css("padding", "10px 5px");
+    });
 
 });

diff --git a/lib/menu-walker.php b/lib/menu-walker.php
index 2fb7592..1850531 100644 (file)
--- a/lib/menu-walker.php
+++ b/lib/menu-walker.php
@@ -2,6 +2,52 @@
 /**
  * Customize the output of menus for Foundation top bar
  */
+if ( ! class_exists( 'Feature_Top_Bar_Walker' ) ) :
+class Feature_Top_Bar_Walker extends Walker_Nav_Menu {
+
+    function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {
+        static $mainLevelCounter;
+        if ($depth == 0) {
+            ++$mainLevelCounter;
+        }
+        $element->has_children = ! empty( $children_elements[ $element->ID ] );
+        $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
+        $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? 'has-dropdown main-nav' : '';
+//        $element->classes[] = ( $element->post_parent == 0 && $mainLevelCounter < 3 ) ? '' : 'drop-left';
+        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
+    }
+    
+//    function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
+//        $item_html = '';
+//        parent::start_el( $item_html, $object, $depth, $args );
+// 
+//        // Insert style to display page's thumbnail
+//        $item_style = '';
+//        if ($depth == 0 && has_post_thumbnail((int)$object->object_id)) {
+//            $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id((int)$object->object_id), 'large');
+//            $item_style .= "<style>#menu-item-".$object->ID." > .dropdown:before { background-image: url('".$thumbnail[0]."');</style>";
+//        }
+//        //$output .= ( 0 == $depth ) ? '<li class="divider"></li>' : '';
+//        $classes = empty( $object->classes ) ? array() : (array) $object->classes;
+//        if ( in_array( 'label', $classes ) ) {
+//            //$output .= '<li class="divider"></li>';
+//            $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
+//        }
+//        if ( in_array( 'divider', $classes ) ) {
+//            $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
+//        }
+//        if ($item_style)
+//            $output .= $item_style;
+//        $output .= $item_html;
+//    }
+
+    function start_lvl( &$output, $depth = 0, $args = array() ) {
+        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
+    }
+
+}
+endif;
+
 if ( ! class_exists( 'Glm_Theme_Top_Bar_Walker' ) ) :
 class Glm_Theme_Top_Bar_Walker extends Walker_Nav_Menu {
     function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {

diff --git a/lib/navigation.php b/lib/navigation.php
index 0c1b74d..5ef3452 100644 (file)
--- a/lib/navigation.php
+++ b/lib/navigation.php
@@ -1,7 +1,8 @@
 <?php
 
 register_nav_menus(array(
-  'top-bar' => 'Site Navigation'
+  'top-bar' => 'Site Navigation',
+    'header-bar' => 'Top Links'
 ));
 
 /**
@@ -71,6 +72,24 @@ if ( ! function_exists( 'glm_theme_footer' ) ) {
       ));
   }
 }
+if ( ! function_exists( 'header_top_bar' ) ) {
+  function header_top_bar() {
+      wp_nav_menu(array(
+          'container' => false,                           // remove nav container
+          'container_class' => '',                        // class of container
+          'menu' => '',                                   // menu name
+          'menu_class' => '',                             // adding custom nav class
+          'theme_location' => 'header-bar',                  // where it's located in the theme
+          'before' => '',                                 // before each link <a>
+          'after' => '',                                  // after each link </a>
+          'link_before' => '',                            // before each link text
+          'link_after' => '',                             // after each link text
+          'depth' => 3,                                   // limit the depth of the nav
+          'fallback_cb' => false,                         // fallback function (see below)
+          'walker' => new Feature_Top_Bar_Walker()
+      ));
+  }
+}
 
 /**
  * glm_page_menu

diff --git a/scss/_search.scss b/scss/_search.scss
index 8da6853..071042e 100644 (file)
--- a/scss/_search.scss
+++ b/scss/_search.scss
@@ -116,7 +116,7 @@ header .searchform input[type="submit"]:hover, header .searchformHeader input[ty
     padding: 0px;
 }
 .socialHeader{
-    width: 100%;
+//    width: 100%;
 }
 #ui-datepicker-div{
    display: none;

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 2612647..f07cdf6 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -227,4 +227,18 @@
 #rate{
     margin-bottom: 20px;
 }
-
+#linksNav{
+    background:rgb(4, 56, 103);
+    height: 48px;
+    position: relative;
+    top: 15px;
+}
+#headerLinks > ul#menu-menu-2 > li::before{
+margin-top: 13px;
+}
+#headerLinks > ul#menu-menu-2 > li{
+    padding: 0px 15px; 
+}
+#socialLinks{
+    
+}
\ No newline at end of file