From f887eedb1bd3170d14c29ebb34d24b67a1425c52 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 5 Apr 2020 12:17:31 +0200
Subject: [PATCH] working on custom main menu

---
 kit/functions.php |  95 ++++-
 kit/header.php    | 926 +---------------------------------------------
 kit/style.css     | 453 +----------------------
 3 files changed, 98 insertions(+), 1376 deletions(-)

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 @@
 <?php
 
 function kit_setup() {
-  register_nav_menus( array(
-    'primary' => 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<ul role=\"menu\" class=\" dropdown-menu\">\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 . '<li' . $id . $value . $class_names .'>';
+
+		$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 .= '<a'. $attributes .'>';
+
+		$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 ) ? ' <i class="fa fa-angle-down"></i></a>' : '</a>';
+		$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 @@
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/cookieconsent.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/magnific-popup.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/swiper.css" media="all">
+    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/menu.css" media="all">
 
     <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
     <script src="<?php bloginfo('stylesheet_directory');?>/js/js.js" type="text/javascript" async="async"></script>
@@ -114,928 +115,11 @@
       <input class="header-burger-button" id="header-burger-button" type="checkbox">
       <label for="header-burger-button"><span>Navigation öffnen / schließen</span></label>
 
-      <nav>
-        <ul>
-
-
-
-    <li class="">
-
-        <div class="nav-first-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit">
-        Über das KIT
-      </a>
-
-
-
-
-            <section class="nav-second-level mega-flyout" style="">
-              <div class="content-wrap">
-                <div class="container container-3-cols">
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories">
-
-          <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
-
-        <span>Success Stories</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck-1">Unser Auslandspraktikum in Dublin</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis-1">Glückwunsch und ein Grund zu feiern!</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/azubis-fuer-azubis">Azubis für AZUBIS</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/von-quito-nach-karsruhe-und-zurueck">Von Quito nach Karlsruhe und zurück</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/skylar-mensch-und-maschine-in-interaktion">SKYLAR – Mensch und Maschine in Interaktion</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/die-armar-familie-hat-zuwachs-bekommen">Die ARMAR Familie hat Zuwachs bekommen!</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/ueber-das-kit/success-stories/was-haben-neutrinos-mit-katrin-zu-tun">Was haben Neutrinos mit KATRIN zu tun?</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/zahlen-und-fakten">
-
-          <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-barchart-primary.svg" alt="" width="24" height="24">
-
-        <span>Zahlen und Fakten</span>
-      </a>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/ansprechpartner-kontakt">
-
-          <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-person-primary.svg" alt="" width="24" height="24">
-
-        <span>Ansprechpartner &amp; Kontakt</span>
-      </a>
-
-
-    </div>
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/ueber-das-kit/newsletter-archiv">
-
-          <img class="icon" src="<?php bloginfo('stylesheet_directory');?>/img/nav-second-level-star-primary.svg" alt="" width="24" height="24">
-
-        <span>Newsletter Archiv</span>
-      </a>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                </div>
-              </div>
-            </section>
-
-
-
-
-    </li>
-
-
-
-
-
-    <li class="">
-
-        <div class="nav-first-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung">
-        Berufsausbildung
-      </a>
-
-
-
-
-            <section class="nav-second-level mega-flyout" style="">
-              <div class="content-wrap">
-                <div class="container container-3-cols">
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe">
-
-          <img class="icon" src="index_files/nav-second-level-wrench-primary.svg" alt="" width="24" height="24">
-
-        <span>Gewerblich-technische Berufe</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/elektroniker/-in-fuer-geraete-und-systeme">Elektroniker/-in für Geräte und Systeme</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachangestellte/-r-fuer-medien-und-informationsdienste">Fachangestellte/-r für Medien- und Informationsdienste</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachinformatiker/-in-fr-systemintegration">Fachinformatiker/-in, FR Systemintegration</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachinformatiker/-in-fr-anwendungsentwicklung">Fachinformatiker/-in, FR Anwendungsentwicklung</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fachkraft-fuer-abwassertechnik">Fachkraft für Abwassertechnik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/fotograf/-in">Fotograf/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/gaertner/-in">Gärtner/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/holzmechaniker/-in">Holzmechaniker/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/industriemechaniker/-in">Industriemechaniker/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/koch/koechin">Koch/Köchin</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/technischer/-e-produktdesigner/-in-fuer-maschinen-und-anlagenkonstruktion">Technischer/-e Produktdesigner/-in für Maschinen- und Anlagenkonstruktion</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/tischler/-in">Tischler/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/zerspanungsmechaniker/-in">Zerspanungsmechaniker/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/mathematisch-technischer/-e-softwareentwickler/-in">Mathematisch-technischer/-e Softwareentwickler/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/elektroniker/-in-fuer-geraete-und-systeme-1">Werkfeuerwehrmann/-frau</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe">
-
-          <img class="icon" src="index_files/nav-second-level-flask-primary.svg" alt="" width="24" height="24">
-
-        <span>Naturwissenschaftliche Berufe</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/biologielaborant/-in">Biologielaborant/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/chemielaborant/-in">Chemielaborant/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/naturwissenschaftliche-berufe/physiklaborant/-in">Physiklaborant/-in</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/gewerblich-technische-berufe/tierpfleger/-in">Tierpfleger/-in</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe">
-
-          <img class="icon" src="index_files/nav-second-level-barchart-primary.svg" alt="" width="24" height="24">
-
-        <span>Kaufmännische Berufe</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/industriekauffrau/-mann">Industriekaufmann/-frau</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/industriekauffrau/-mann-internationales-marketing">Industriekaufmann/-frau, Internationales Marketing</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/informatikkauffrau/-mann">Informatikkaufmann/-frau</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/kauffrau/-mann-fuer-bueromanagement">Kaufmann/-frau für Büromanagement</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/berufsausbildung/kaufmaennische-berufe/veranstaltungskauffrau/-mann">Veranstaltungskaufmann/-frau</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                </div>
-              </div>
-            </section>
-
-
-
-
-    </li>
-
-
-
-
-
-    <li class="">
-
-        <div class="nav-first-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-
-      <a href="https://www.kit-ausbildung.de/de/duales-studium">
-        Duales Studium
-      </a>
-
-
-
-
-            <section class="nav-second-level mega-flyout" style="">
-              <div class="content-wrap">
-                <div class="container container-3-cols">
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts">
-
-        <span>Bachelor of Arts</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-industrial-management">BWL - Industrial Management</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-international-business">BWL - International Business</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-arts/bwl-messe-kongress-und-eventmanagement">BWL - Messe-, Kongress- und Eventmanagement</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science">
-
-        <span>Bachelor of Science</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/chemie-und-bioingenieurwesen">Chemie- und Bioingenieurwesen</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/informatik">Informatik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/informationstechnik">Informationstechnik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-arbeitssicher">Sicherheitswesen - Arbeitssicherheit</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-strahlenschut">Sicherheitswesen - Strahlenschutz</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/sicherheitswesen-umwelttechnik">Sicherheitswesen - Umwelttechnik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-science/wirtschaftsinformatik">Wirtschaftsinformatik</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering">
-
-        <span>Bachelor of Engineering</span>
-      </a>
-
-
-
-        <div class="nav-second-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-        <ul style="">
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/elektrotechnik-elektrische-energietechnik">Elektrotechnik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/maschinenbau-konstruktion-und-entwicklung">Maschinenbau - Konstruktion und Entwicklung</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/maschinenbau-verfahrenst">Maschinenbau - Verfahrenstechnik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/allgemeine-mechatronik">Allgemeine Mechatronik</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/wirtschaftsingenieurwesen">Wirtschaftsingenieurwesen</a>
-    </li>
-
-
-
-
-
-    <li class="">
-      <a href="https://www.kit-ausbildung.de/de/duales-studium/bachelor-of-engineering/integrated-engineering/schwerpunkt-projektmanagement">Integrated Engineering/Schwerpunkt Projektmanagement</a>
-    </li>
-
-
-
-        </ul>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                </div>
-              </div>
-            </section>
-
-
-
-
-    </li>
-
-
-
-
-
-    <li class="">
-
-        <div class="nav-first-level-opener">
-          <span>Untermenu öffnen / schließen</span>
-        </div>
-
-
-      <a href="https://www.kit-ausbildung.de/de/praktikum">
-        Praktikum
-      </a>
-
-
-
-
-            <section class="nav-second-level mega-flyout" style="">
-              <div class="content-wrap">
-                <div class="container container-3-cols">
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/praktikum/schuelerpraktika">
-
-        <span>Schülerpraktika</span>
-      </a>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-
-
-    <div class="nav-second-level-group">
-
-
-      <a class="nav-second-level-group-headline" href="https://www.kit-ausbildung.de/de/praktikum/praktikum-fuer-studierende">
-
-        <span>Praktikum für Studierende</span>
-      </a>
-
-
-    </div>
-
-
-
-
-
-
-
-                    </div>
-
-                    <div class="column">
-
-
-
-
-
-                    </div>
-
-                </div>
-              </div>
-            </section>
-
-
-
-
-    </li>
-
-
-
-        </ul>
-      </nav>
-
-
-
-
-  <div class="header-button-container">
-    <a href="https://www.kit-ausbildung.de/de/offene-stellen" class="header-button"><span>Offene Stellen</span></a>
-  </div>
-
-
-
+      <?php get_template_part('template-parts/site-nav'); ?>
 
+      <div class="header-button-container">
+        <a href="https://www.kit-ausbildung.de/de/offene-stellen" class="header-button"><span>Offene Stellen</span></a>
+      </div>
 
     </div>
   </header>
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;