diff --git a/kit/functions.php b/kit/functions.php
index ae97337..cf603c7 100644
--- a/kit/functions.php
+++ b/kit/functions.php
@@ -1,10 +1,99 @@
esc_html__( 'Footer Menu', 'kit' ),
- ) );
+
+ add_theme_support('menus');
add_theme_support( 'post-thumbnails' );
+
+ register_nav_menus( array(
+ 'primary' => 'Main Menu',
+ 'secondary' => 'Footer Menu',
+ ) );
+
};
add_action( 'after_setup_theme', 'kit_setup' );
+
+class kit_custom_main_menu extends Walker_Nav_Menu {
+
+ public function start_lvl( &$output, $depth = 0, $args = array() ) {
+ $indent = str_repeat( "\t", $depth );
+ $output .= "\n$indent
\n";
+ }
+
+ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
+ $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
+
+ $class_names = $value = '';
+
+ $classes = empty( $item->classes ) ? array() : (array) $item->classes;
+ $classes[] = 'menu-item-' . $item->ID;
+
+ /*grab the default wp nav classes*/
+ $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
+
+ /*if the current item has children, append the dropdown class*/
+ if ( $args->has_children )
+ $class_names .= ' dropdown';
+
+ /*if there aren't any class names, don't show class attribute*/
+ $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
+
+ $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
+ $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
+
+
+ $output .= $indent . '- ';
+
+ $atts = array();
+ $atts['title'] = ! empty( $item->title ) ? $item->title : '';
+ $atts['target'] = ! empty( $item->target ) ? $item->target : '';
+ $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
+
+
+ /*if the current menu item has children and it's the parent, set the dropdown attributes*/
+ if ( $args->has_children && $depth === 0 ) {
+ $atts['href'] = '#';
+ $atts['data-toggle'] = 'dropdown';
+ $atts['class'] = 'dropdown-toggle';
+ } else {
+ $atts['href'] = ! empty( $item->url ) ? $item->url : '';
+ }
+
+ $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
+
+ $attributes = '';
+ foreach ( $atts as $attr => $value ) {
+ if ( ! empty( $value ) ) {
+ $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
+ $attributes .= ' ' . $attr . '="' . $value . '"';
+ }
+ }
+
+ $item_output = $args->before;
+
+ $item_output .= '';
+
+ $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
+
+ /* if the current menu item has children and it's the parent item, append the fa-angle-down icon*/
+ $item_output .= ( $args->has_children && $depth === 0 ) ? ' ' : '';
+ $item_output .= $args->after;
+
+ $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
+
+ }
+
+
+ public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
+ if ( ! $element )
+ return;
+
+ $id_field = $this->db_fields['id'];
+
+ if ( is_object( $args[0] ) )
+ $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
+
+ parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
+ }
+}
diff --git a/kit/header.php b/kit/header.php
index 944d534..0720bf0 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -15,6 +15,7 @@
+
@@ -114,928 +115,11 @@
-
-
-
-
-
-
-
-
-
+
+
diff --git a/kit/style.css b/kit/style.css
index f2e6b61..8b4ac27 100644
--- a/kit/style.css
+++ b/kit/style.css
@@ -1653,458 +1653,7 @@ header:not(.sticky-header) .header-button-container {
}
}
-nav .container-3-cols {
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-}
-
-nav .container-3-cols .column {
- margin-top: 1.66667rem;
-}
-
-nav .container-3-cols .column:nth-of-type(1), nav .container-3-cols .column:nth-of-type(2), nav .container-3-cols .column:nth-of-type(3) {
- margin-top: 0;
-}
-
-nav .container-3-cols .column:nth-of-type(3n+1) {
- margin-left: 0;
-}
-
-nav > ul {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-align: end;
- -ms-flex-align: end;
- align-items: flex-end;
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
-}
-
-nav > ul > li {
- margin-left: 2.5rem;
-}
-
-nav > ul > li > a {
- position: relative;
- display: block;
- font-weight: 500;
- line-height: 1;
-}
-
-nav > ul > li:hover > a,
-nav > ul > li:active > a {
- color: #009982;
-}
-
-nav > ul > li:hover > a::after,
-nav > ul > li:active > a::after {
- content: '';
- position: absolute;
- bottom: -1.61111rem;
- left: 0;
- width: 100%;
- height: 1.55556rem;
- border-bottom: 4px solid #009982;
-}
-
-nav > ul > li.opened .nav-first-level-opener::after {
- -webkit-transform: rotateX(90deg);
- transform: rotateX(90deg);
-}
-
-nav > ul > li .nav-first-level-opener {
- position: absolute;
- top: 12px;
- right: 12px;
- z-index: 1;
- display: none;
- width: 30px;
- height: 30px;
- cursor: pointer;
-}
-
-nav > ul > li .nav-first-level-opener span {
- display: none;
-}
-
-nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
- content: '';
- position: absolute;
- background-color: #009982;
- -webkit-transition: -webkit-transform .3s;
- transition: -webkit-transform .3s;
- -o-transition: transform .3s;
- transition: transform .3s;
- transition: transform .3s, -webkit-transform .3s;
-}
-
-nav > ul > li .nav-first-level-opener::before {
- top: 45%;
- right: 25%;
- left: 25%;
- width: 50%;
- height: 10%;
-}
-
-nav > ul > li .nav-first-level-opener::after {
- top: 25%;
- bottom: 25%;
- left: 45%;
- width: 10%;
- height: 50%;
-}
-
-@media (max-width: 1280px) {
- nav > ul > li:hover a::after,
- nav > ul > li:active a::after {
- border-bottom-width: 3px;
- }
-}
-
-@media (max-width: 1024px) {
- nav > ul > li:hover a::after,
- nav > ul > li:active a::after {
- border-bottom-width: 2px;
- }
-}
-
-@media (max-width: 960px) {
- nav {
- position: fixed;
- top: 4.44444rem;
- right: -360px;
- z-index: 20;
- width: 360px;
- max-width: 100%;
- height: calc(100vh - 80px + 20px);
- padding: 0;
- overflow: hidden;
- overflow-y: scroll;
- background-color: #f2f2f2;
- -webkit-transition: right .3s;
- -o-transition: right .3s;
- transition: right .3s;
- }
- nav > ul {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- }
- nav > ul > li {
- position: relative;
- z-index: 2;
- width: 100%;
- margin-left: 0;
- border-bottom: 1px solid #cccccc;
- }
- nav > ul > li > a {
- padding: 20px;
- line-height: 1;
- background-color: #ffffff;
- }
- nav > ul > li:nth-of-type(1) {
- border-top: 1px solid #cccccc;
- }
- nav > ul > li:hover > a::after,
- nav > ul > li:active > a::after {
- display: none;
- }
- nav > ul > li .nav-first-level-opener {
- display: block;
- }
- .header-burger-button:checked + label + nav {
- right: 0;
- }
-}
-
-.nav-second-level {
- position: absolute;
- top: 100%;
- z-index: 10;
- width: 17.77778rem;
- padding-top: 2.5rem;
- padding-bottom: 3.33333rem;
- overflow: hidden;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- background-color: #f2f2f2;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: opacity .3s, visibility .3s;
- -o-transition: opacity .3s, visibility .3s;
- transition: opacity .3s, visibility .3s;
-}
-
-.nav-second-level::before {
- content: '';
- position: absolute;
- top: -10px;
- display: block;
- width: 100%;
- padding-top: 10px;
-}
-
-.nav-second-level.mega-flyout {
- right: 0;
- left: 0;
- width: 100%;
- min-width: 100%;
- max-width: none;
- padding-top: 4.44444rem;
- padding-bottom: 8.88889rem;
-}
-
-.nav-second-level.mega-flyout::after {
- content: '';
- position: absolute;
- top: 100%;
- right: 0;
- left: 0;
- display: block;
- height: 0.83333rem;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.5)), to(rgba(51, 51, 51, 0)));
- background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
- background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
- background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0));
-}
-
-.nav-second-level .content-wrap {
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.nav-second-level .container {
- width: 100%;
-}
-
-.nav-second-level .container .column {
- overflow: hidden;
- overflow-wrap: break-word;
- overflow-wrap: anywhere;
-}
-
-.nav-second-level-group {
- position: relative;
-}
-
-.nav-second-level-group + .nav-second-level-group {
- margin-top: 2.66667rem;
-}
-
-.nav-second-level-group-headline {
- position: relative;
- display: inline-block;
- margin-bottom: 1rem;
- margin-left: 2rem;
- color: #009982;
- font-weight: 700;
-}
-
-.nav-second-level-group-headline .icon {
- position: absolute;
- top: 1px;
- left: -2rem;
- width: 1.33333rem;
- height: 1.33333rem;
- background-repeat: no-repeat;
- background-position: left center;
- background-size: contain;
-}
-
-.nav-second-level-group-headline span {
- margin-left: -2rem;
-}
-
-.nav-second-level-group-headline .icon + span {
- margin-left: 0;
-}
-
-.nav-second-level-group-headline:hover {
- text-decoration: underline;
-}
-
-.nav-second-level-group.opened .nav-second-level-opener::after {
- -webkit-transform: rotateX(90deg);
- transform: rotateX(90deg);
-}
-
-.nav-second-level ul li a {
- position: relative;
- display: block;
- margin-left: 1.33333rem;
- font-size: 0.88889rem;
- font-weight: 300;
-}
-
-.nav-second-level ul li a::before {
- content: '';
- position: absolute;
- top: 0.33333rem;
- left: -1.33333rem;
- width: 0.88889rem;
- height: 0.88889rem;
- font-size: 1.44444rem;
- background-image: url(img/arrow-right-grey.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
-}
-
-.nav-second-level ul li a:hover {
- text-decoration: underline;
-}
-
-.nav-second-level .nav-second-level-opener {
- position: absolute;
- top: 0.88889rem;
- right: 14px;
- z-index: 1;
- display: none;
- width: 24px;
- height: 24px;
- cursor: pointer;
-}
-
-.nav-second-level .nav-second-level-opener span {
- display: none;
-}
-
-.nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
- content: '';
- position: absolute;
- background-color: #009982;
- -webkit-transition: -webkit-transform .3s;
- transition: -webkit-transform .3s;
- -o-transition: transform .3s;
- transition: transform .3s;
- transition: transform .3s, -webkit-transform .3s;
-}
-
-.nav-second-level .nav-second-level-opener::before {
- top: 45%;
- right: 25%;
- left: 25%;
- width: 12px;
- height: 2px;
-}
-
-.nav-second-level .nav-second-level-opener::after {
- top: 25%;
- bottom: 25%;
- left: 45%;
- width: 2px;
- height: 12px;
-}
-
-nav ul li:hover .nav-second-level {
- overflow: visible;
- opacity: 1;
- visibility: visible;
-}
-
-@media (max-width: 960px) {
- .nav-second-level,
- nav ul li:hover .nav-second-level {
- position: static;
- width: 100%;
- height: auto;
- padding-top: 0;
- padding-bottom: 0.83333rem;
- border-top: 1px solid #cccccc;
- overflow: hidden;
- opacity: 1;
- visibility: visible;
- }
- .nav-second-level.mega-flyout,
- nav ul li:hover .nav-second-level.mega-flyout {
- padding-top: 0;
- padding-bottom: 0.83333rem;
- }
- .nav-second-level .container,
- nav ul li:hover .nav-second-level .container {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- }
- .nav-second-level .container-3-cols,
- nav ul li:hover .nav-second-level .container-3-cols {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- }
- .nav-second-level .container-3-cols .column,
- .nav-second-level .container-3-cols .column + .column,
- nav ul li:hover .nav-second-level .container-3-cols .column,
- nav ul li:hover .nav-second-level .container-3-cols .column + .column {
- width: 100%;
- margin-left: 0;
- }
- .nav-second-level .container-3-cols .column:nth-of-type(n+3),
- nav ul li:hover .nav-second-level .container-3-cols .column:nth-of-type(n+3) {
- margin-top: 0;
- }
- .nav-second-level .content-wrap,
- nav ul li:hover .nav-second-level .content-wrap {
- padding: 0;
- }
- .nav-second-level::after,
- nav ul li:hover .nav-second-level::after {
- display: none;
- }
- .nav-second-level .nav-second-level-opener,
- nav ul li:hover .nav-second-level .nav-second-level-opener {
- display: block;
- }
- .nav-second-level-group + .nav-second-level-group {
- margin-top: 0;
- }
- .nav-second-level-group-headline {
- margin-top: 0.83333rem;
- margin-bottom: 0;
- margin-left: 2.77778rem;
- }
- .nav-second-level-group-headline .icon {
- top: 0;
- left: -1.55556rem;
- }
- .nav-second-level-group-headline span {
- margin-left: -1.55556rem;
- }
- .nav-second-level-group-headline .icon + span {
- margin-left: 0;
- }
- .nav-second-level-group ul {
- padding: 0.83333rem 1.44444rem;
- margin-top: 0;
- overflow: hidden;
- }
- .opened > a {
- color: #009982;
- }
-}
+/* header menu in seperate css file */
aside {
position: fixed;