WordPress menu > ok

samuelguebo · Dec 25, 2016 · ec6cf0b · ec6cf0b
1 parent b1db214
commit ec6cf0b
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 67 deletions.
diff --git a/.sass-cache/cd46e77d83048a9dda281617278ace857470f724/style.scssc b/.sass-cache/cd46e77d83048a9dda281617278ace857470f724/style.scssc
diff --git a/css/.sass-cache/a92b4daeef397dd35be3f4230ec4b3d462645b57/style.scssc b/css/.sass-cache/a92b4daeef397dd35be3f4230ec4b3d462645b57/style.scssc
diff --git a/css/scss/style.scss b/css/scss/style.scss
@@ -111,11 +111,28 @@ header div.logo img {
 /* NAVIGATION */
 .top-bar {
     background: none;
-    z-index: 1;
+}
+.top-bar.expanded {
+    overflow: visible;
+    min-height: 100%;
+    z-index: 99;
 }
 .top-bar-section li:not(.has-form) a:not(.button) {
     font-size: 1.2em;
 }
+@media only screen and (max-width: 60em) {
+    .top-bar-section li:not(.has-form) a:not(.button) {
+    font-size: 1em;
+    }
+    .top-bar-section li:not(.has-form) a:not(.button) {
+        line-height: 2.8125rem;
+        padding: 2px 0.5rem;
+    }
+}
+.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
+    font-size: 1em;
+}
+
 .top-bar-section ul li > a {
     color:$link-color;
 }
@@ -131,14 +148,17 @@ header div.logo img {
 }
 
 .top-bar .toggle-topbar.menu-icon {
-    margin-top: -36px;
     top: 50%;
 }
-
+.top-bar ul li {
+        background: #FFF;
+        /*border-bottom: dotted 1px $link-color;*/
+    }
+.top-bar .toggle-topbar.menu-icon {
+    border-bottom: none;
+}
 .top-bar .toggle-topbar.menu-icon a {
     color: $link-color;
-    height: 70px;
-    line-height: 70px;
     padding: 0 2.5rem 0 0.9375rem;
     position: relative;
     font-size: 1.2em;
@@ -163,10 +183,31 @@ header div.logo img {
     margin-top: 20px;
 }
 
-.nav-wrapper nav .home-link i{
+.nav-wrapper nav #home-link i{
     font-size:1.8em;
 }
 
+.top-bar-section .dropdown li a {
+    font-size:0.7em;
+}
+.top-bar-section .dropdown {
+    display: block;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+}
+
+/* WORDPRESS NAVIGATION HIGHLIGHT */
+
+.nav-wrapper nav.top-bar li.current-menu-item,
+.nav-wrapper nav.top-bar li.current-menu-ancestor,
+.nav-wrapper nav.top-bar li.current-menu-parent
+{
+    border-bottom:solid 4px $link-color;
+}
+
 /* SOCIAL ICONS */
 
 .socials {
@@ -905,7 +946,7 @@ img.alignright {
 }
 
 
-/* MOBILE STYLES */
+/* RESPONSIVE STYLES */
 
 @media only screen and (max-width: 39.0624em) {
     .columns.nav-wrapper {
@@ -915,6 +956,7 @@ img.alignright {
     }
 }
 @media only screen and (max-width: 40.0625em) {
+
     header div.slogan .title{
     padding-top:20px;
     font-size: 3.8em;
@@ -937,11 +979,26 @@ img.alignright {
         background: #FFF;
         border-bottom: dotted 1px $link-color;
     }
-    .top-bar-section ul li:hover:not(.has-form) > a:before {
+    .top-bar-section .dropdown li.title.back h5 a::before{
+        font-family: $icon-font;
+        content: '\f053';
+        font-size: 0.8em;
+        border:none;
+        color:$primary-color;
+    }
+    .top-bar-section .dropdown li.title.back h5 a{
+        color: #FFF;
+    }
+    .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
+        color: $primary-color;
+        display: block;
+    }
+    .top-bar-section .has-dropdown > a::after {
         font-family: $icon-font;
         content: '\f054';
-        padding-right: 10px;
         font-size: 0.8em;
+        border:none;
+        padding-right:10x;
     }
     .top-bar-section ul li:hover:not(.has-form) > a {
         color: #000;
@@ -966,24 +1023,23 @@ img.alignright {
     .main-column {
         padding-right: 0px;
     }
+    .category-row article,
     .sy-controls li a:after {
         top: 50%;
     }
-    #home-slideshow .slider-caption {
-        position: absolute;
-        padding: 15px;
-        top: 15%;
-        margin-left: 0px;
-        left: 50px;
-    }
     p {
         font-size: 0.9rem;
         line-height: 1.4;
         margin-bottom: 1.25rem;
         text-rendering: optimizeLegibility;
     }
-    #home-slideshow .slider-caption .post-item-date {
+    .category-row article .post-item-image img{
-        display: none;
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
+    .category-row article .post-item-image {
+        max-height: 200px;
     }
     .category-row article .panel p {
         font-family: inherit;

diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/footer.php b/footer.php
@@ -2,7 +2,7 @@
 /**
  * The template for displaying the footer
  *
- * Contains the closing of the #content div and all content after.
+ * Contains the closing of the body all content after.
  *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *

diff --git a/functions.php b/functions.php
@@ -46,7 +46,7 @@ function acajou_setup() {
 
 	// This theme uses wp_nav_menu() in one location.
 	register_nav_menus( array(
-		'menu-1' => esc_html__( 'Primary', 'acajou' ),
+		'primary' => esc_html__( 'Primary', 'acajou' ),
 	) );
 
 	/*

diff --git a/header.php b/header.php
@@ -42,7 +42,7 @@
                 </div> 
             </div><!--slogan/-->
             <div class="row socials">
-                <ul class="small-5 small-centered large-3 large-centered columns">
+                <ul class="large-3 large-centered medium-4 medium-centered small-centered small-7 columns ">
                     <li class="reveal"><a href="#"><i class="fa fa-twitter"></i></a></li>
                     <li class="reveal"><a href="#"><i class="fa fa-facebook"></i></a></li>
                     <li class="reveal"><a href="#"><i class="fa fa-youtube"></i></a></li>

diff --git a/home-head.php b/home-head.php
diff --git a/inc/extras.php b/inc/extras.php
@@ -34,9 +34,9 @@ function acajou_body_classes( $classes ) {
  */
 function acajou_post_item_class() {
 	if ( is_front_page() || is_home()) {
-		echo 'large-4';
+		echo 'large-4 medium-6';
 	}elseif(!is_front_page() && !is_home() && !is_singular()) {
-        echo 'large-6';
+        echo 'large-6 medium-6';
 
     }
 }
@@ -60,4 +60,84 @@ function acajou_pingback_header() {
 function new_excerpt_length($length) {
     return 25;
 }
-add_filter('excerpt_length', 'new_excerpt_length');
+add_filter('excerpt_length', 'new_excerpt_length');
+
+/**
+ * Adding the Home button to main menu 
+ */
+add_filter( 'wp_nav_menu_items', 'add_home_menu_item', 10, 2 );
+function add_home_menu_item ( $items, $args ) {
+    if ($args->theme_location == 'primary') {
+
+            $items = '<li id="home-link" $class_names><a href="'.site_url().'" title="'.esc_html__( 'Home', 'acajou' ).'"><i class="fa fa-home"></i></a></li>'.$items;
+
+    }
+    return $items;
+}
+
+/**
+ * Dealig with submenu items
+ */
+class Multilevel_Menu extends Walker_Nav_Menu
+{
+   function start_lvl(&$output, $depth)
+   {
+       $indent = str_repeat("\t", $depth);
+       $output .= "\n$indent<ul class=\"dropdown\">\n";
+   }
+   function end_lvl(&$output, $depth)
+   {
+       $indent = str_repeat("\t", $depth);
+       $output .= "$indent</ul>\n";
+   }
+    // adding arrow to top-menu
+    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
+
+        if ( !$element )
+                return;
+
+        $id_field = $this->db_fields['id'];
+
+        //display this element
+        if ( is_array( $args[0] ) )
+                $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
+
+        //Adds the 'parent' class to the current item if it has children               
+        if( ! empty( $children_elements[$element->$id_field] ) ) {
+                array_push($element->classes,'has-dropdown not-click');
+                //$element->title .= ' <i class="fa fa-caret-down"></i>';
+        }
+
+        $cb_args = array_merge( array(&$output, $element, $depth), $args);
+
+        call_user_func_array(array(&$this, 'start_el'), $cb_args);
+
+        $id = $element->$id_field;
+
+        // descend only when the depth is right and there are childrens for this element
+        if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
+
+                foreach( $children_elements[ $id ] as $child ){
+
+                        if ( !isset($newlevel) ) {
+                                $newlevel = true;
+                                //start the child delimiter
+                                $cb_args = array_merge( array(&$output, $depth), $args);
+                                call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
+                        }
+                        $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
+                }
+                unset( $children_elements[ $id ] );
+        }
+
+        if ( isset($newlevel) && $newlevel ){
+                //end the child delimiter
+                $cb_args = array_merge( array(&$output, $depth), $args);
+                call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
+        }
+
+        //end this element
+        $cb_args = array_merge( array(&$output, $element, $depth), $args);
+        call_user_func_array(array(&$this, 'end_el'), $cb_args);
+    }
+}
diff --git a/menu.php b/menu.php
@@ -1,19 +1,39 @@
+<?php
+/**
+ * The template for displaying the menu
+ *
+ * Contains the menu items
+ *
+ * @link https://developer.wordpress.org/reference/functions/wp_nav_menu/
+ * @link https://codex.wordpress.org/Class_Reference/Walker
+ * @package Acajou
+ */
+
+?>
 <div class="nav-wrapper large-10 small-9 columns">
     <nav class="top-bar" data-topbar >
         <ul class="title-area">
             <li class="name">
                  </li>
-            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+            <li class="toggle-topbar menu-icon"><a href="#"><span><?php esc_html_e( 'Menu', 'acajou' );?></span></a></li>
         </ul>
         <section class="top-bar-section">
-            <ul class="right main-nav">
+            <?php
-                <li class="home-link"><a href="index.php"><i class="fa fa-home"></i></a></li>
+                /* Primary menu */
-                <li><a href="single.php">About</a></li>
+                if(function_exists('wp_nav_menu')) {
-                <li><a href="archive.php">Blog</a></li>
+                    wp_nav_menu(array(
-                <li><a href="archive.php">Projects</a></li>
+                    'theme_location' => 'primary',
-                <li><a href="single.php">Contacts</a></li>
+                    'container' => '',
-            </ul>
+                    'container_class' => '',
-        </section>
+                    'container_id' => '',
-    </nav>
+                    'menu_id' => 'main-menu',
-</div>
+                    'menu_class' => 'right main-nav',
+                    'fallback_cb' => '',
+                    'walker' => new Multilevel_Menu()
+                    )); 
+                }
+            ?>
+        </section><!--/top-bar-section-->
+    </nav><!--/top-bar-->
+</div><!--/nav-wrapper-->   
 <div class="clearfix"></div>
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/screenshot.png b/screenshot.png