Dynamic menu updated

css/theme-styles.css

@@ -1777,7 +1777,7 @@ span.degree {
 }
 
 /* nav */
-
+/*
 #navbar {
   position: fixed;
   top: 0;
@@ -1829,21 +1829,21 @@ span.degree {
     color: #fff;
   }
 }
-#navbar #upper-nav nav .upper-menu-link {
+#navbar #upper-nav nav .menu-uiu-header-menu {
   display: flex;
   align-items: center;
   z-index: 10;
 }
-#navbar #upper-nav nav .upper-menu-link > li {
+#navbar #upper-nav nav .menu-uiu-header-menu > li {
   margin-right: 50px;
 }
-#navbar #upper-nav nav .upper-menu-link > li:last-child {
+#navbar #upper-nav nav .menu-uiu-header-menu > li:last-child {
   margin-right: 0px;
 }
-#navbar #upper-nav nav .upper-menu-link > li:last-child {
+#navbar #upper-nav nav .menu-uiu-header-menu > li:last-child {
   margin-right: 0;
 }
-#navbar #upper-nav nav .upper-menu-link > li > a {
+#navbar #upper-nav nav .menu-uiu-header-menu > li > a {
   color: #fff;
   transition-duration: 0.3s;
   font-size: 14px;
@@ -1853,7 +1853,7 @@ span.degree {
   font-size: 12px;
   cursor: pointer !important;
 }
-#navbar #upper-nav nav .upper-menu-link > li:after {
+#navbar #upper-nav nav .menu-uiu-header-menu > li:after {
   content: "";
   display: block;
   margin: auto;
@@ -1862,15 +1862,15 @@ span.degree {
   background: transparent;
   transition: width 0.3s ease, background-color 0.5s ease;
 }
-#navbar #upper-nav nav .upper-menu-link > li:hover:after {
+#navbar #upper-nav nav .menu-uiu-header-menu > li:hover:after {
   width: 100%;
   background: #fff;
 }
-#navbar #upper-nav nav .upper-menu-link > li.active:after {
+#navbar #upper-nav nav .menu-uiu-header-menu > li.active:after {
   width: 100%;
   background: #fff;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content {
   width: 100%;
   background: #FFFBF6 !important;
   color: #160c0c;
@@ -1882,52 +1882,52 @@ span.degree {
   display: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link {
   display: flex;
   align-items: start;
   padding: 1rem;
   padding-top: 1.5rem !important;
   padding-bottom: 2rem;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link .extra-item {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link .extra-item {
   width: 100%;
   flex: 3;
   text-align: left;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link .extra-item img {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link .extra-item img {
   width: 100%;
   max-width: 350px;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link .extra-item .heading-text {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link .extra-item .heading-text {
   font-size: 1.2rem;
   font-weight: 600;
   color: #994D33;
   margin-top: 1rem;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link .extra-item .text {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link .extra-item .text {
   font-size: 0.8rem;
   max-width: 400px;
   margin-top: 0.25rem;
   color: #994D33;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link .link-container {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link .link-container {
   flex: 4;
   display: flex;
   justify-content: space-around;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul {
   display: flex;
   flex-direction: column !important;
   align-items: flex-start;
   margin-top: 0 !important;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul li {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul li {
   padding: 0.25rem !important;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul li:first-child {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul li:first-child {
   padding-top: 0 !important;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul li a {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul li a {
   font-size: 14px;
   text-align: left !important;
   color: #000;
@@ -1936,15 +1936,15 @@ span.degree {
   text-transform: capitalize;
   transition: all 0.35s;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul li a:first-child {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul li a:first-child {
   padding-top: 0 !important;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content .all-link ul li a:hover {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content .all-link ul li a:hover {
   opacity: 1 !important;
   color: #994D33 !important;
   text-decoration: underline;
 }
-#navbar #upper-nav nav .upper-menu-link > li .menu-content.show-mega-menu {
+#navbar #upper-nav nav .menu-uiu-header-menu > li .menu-content.show-mega-menu {
   display: block !important;
 }
 
@@ -2093,7 +2093,7 @@ section#lower-nav nav ul > li > a > img {
 #navbar.nav-resp #upper-nav nav .logo-close-menu #menu-bars {
   font-size: 30px;
 }
-#navbar.nav-resp #upper-nav nav .upper-menu-link > li .menu-content {
+#navbar.nav-resp #upper-nav nav .menu-uiu-header-menu > li .menu-content {
   top: 55px !important;
 }
 @media screen and (max-width: 1000px) {
@@ -2112,6 +2112,445 @@ section#lower-nav nav ul > li > a > img {
 }
 #navbar.nav-resp #lower-nav nav .lower-menu-link .menu-content {
   top: 96px !important;
+} */
+/*
+#search-close {
+  width: 100px;
+  border-radius: 40px;
+  background-color: #F68B1F;
+  margin-top: 30px;
+  margin-right: 30px;
+}
+
+.overlay-content {
+  overflow: hidden;
+}
+.overlay-content label {
+  display: inline-block;
+}
+.overlay-content h4 {
+  display: inline-block;
+  margin: 0px 20px;
+}
+.overlay-content div a {
+  display: inline-block;
+  text-decoration: underline;
+}
+.overlay-content div h6 {
+  display: inline-block;
+}
+
+#search-bar {
+  width: 60%;
+  display: inline-block;
+}
+
+#search-button {
+  width: 300px;
+  display: inline-block;
+  border-radius: 30px;
+  margin-left: 20px;
+  background: #485680;
+}
+
+#search-modal {
+  overflow: hidden;
+}
+
+#search-button:hover {
+  background-color: #F68B1F;
+}# sourceMappingURL=navbar.css.map */
+
+#navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0;
+  margin: 0 !important;
+  z-index: 999;
+}
+#navbar #upper-nav nav {
+  text-align: center;
+  padding: 2px 0 !important;
+  margin: 0 !important;
+  justify-content: center;
+  align-items: center;
+  height: 70px;
+  z-index: 10;
+  transition: 0.5s ease-in-out;
+  background-color: #160c0c;
+  border-bottom: 4px solid #F68B1F;
+  box-shadow: 0px 5px 12px -5px #2F4858;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav {
+    display: block !important;
+    text-align: unset;
+    height: unset;
+    align-items: unset;
+    border: unset;
+  }
+}
+#navbar #upper-nav nav .logo-close-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#navbar #upper-nav nav .logo-close-menu .logo {
+  width: auto;
+  margin-right: 30px;
+  padding-left: 20px;
+  transition-duration: 0.5s;
+}
+#navbar #upper-nav nav .logo-close-menu .logo img {
+  height: 50px !important;
+  transition-duration: 0.5s;
+}
+#navbar #upper-nav nav .logo-close-menu .menubars-and-search {
+  display: none !important;
+  transition-duration: 0.4s;
+  padding-top: 0.25rem;
+  padding-right: 0.25rem;
+}
+#navbar #upper-nav nav .logo-close-menu .menubars-and-search span {
+  cursor: pointer;
+  font-size: 2.5rem;
+}
+#navbar #upper-nav nav .logo-close-menu .menubars-and-search #seacrh {
+  font-size: 2.4rem;
+  margin-right: 1rem;
+}
+#navbar #upper-nav nav .logo-close-menu .menubars-and-search #seacrh:hover {
+  color: #f3e7e7;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav .logo-close-menu .menubars-and-search {
+    display: block !important;
+    margin: 0px auto;
+    margin-right: 10px !important;
+    font-size: 45px;
+    color: #fff;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu {
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu {
+    display: block !important;
+    padding: 2rem;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li {
+  margin-right: 50px;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li {
+    display: block;
+    margin: unset;
+    text-align: unset;
+    padding: 0.75rem 0.25rem;
+  }
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li.search {
+    display: none;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li:last-child {
+  margin-right: 0px;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li:last-child {
+  margin-right: 0;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li > a {
+  color: #fff;
+  transition-duration: 0.3s;
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  cursor: pointer !important;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li > a {
+    text-align: unset;
+    overflow-y: auto;
+    border-bottom: 1px solid #333;
+    width: 100%;
+    border-radius: unset;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li:after {
+  content: "";
+  display: block;
+  margin: auto;
+  height: 1px;
+  width: 0px;
+  background: transparent;
+  transition: width 0.3s ease, background-color 0.5s ease;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li:after {
+    display: none !important;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li:hover:after {
+  width: 100%;
+  background: #fff;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li.active:after {
+  width: 100%;
+  background: #fff;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu {
+  background: #FFFBF6 !important;
+  color: #160c0c;
+  position: fixed;
+  top: 62px;
+  left: 0;
+  right: 0;
+  z-index: 500 !important;
+  display: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu {
+    position: unset;
+    background: transparent !important;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .container {
+  -moz-columns: 3;
+       columns: 3;
+  gap: 2rem;
+  padding: 2rem 0;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .container {
+    -moz-columns: 1;
+         columns: 1;
+    padding: 0.25rem 1rem 1rem;
+    max-width: unset !important;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .sub-menu-item {
+  display: block;
+  padding: 0.25rem !important;
+  text-align: start;
+  font-size: 0.8rem;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .sub-menu-item a {
+  color: #000;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .sub-menu-item a {
+    color: #fff;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .sub-menu-item a:hover {
+  color: #994D33;
+  opacity: 1;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .col-breaker {
+  -moz-column-break-before: column;
+       break-before: column;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .col-breaker {
+    -moz-column-break-before: unset;
+         break-before: unset;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .extra-item {
+  width: 100%;
+  flex: 3;
+  text-align: left;
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .extra-item img {
+  width: 100%;
+  max-width: 350px;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu .extra-item {
+    display: none;
+  }
+}
+#navbar #upper-nav nav #menu-uiu-header-menu > li .sub-menu.show-mega-menu {
+  display: block !important;
+}
+
+@media screen and (max-width: 1000px) {
+  section#lower-nav nav {
+    display: none !important;
+  }
+}
+section#lower-nav nav {
+  position: static;
+  top: 70px;
+  text-align: center;
+  padding: 0px;
+  justify-content: space-evenly;
+  z-index: 10 !important;
+  transition: 0.5s ease-in-out;
+  background: #2c5d73;
+}
+section#lower-nav nav .lower-menu-link {
+  width: 100vw;
+  justify-content: space-evenly;
+  display: inline-flex;
+}
+section#lower-nav nav .lower-menu-link li {
+  padding: 0 !important;
+}
+section#lower-nav nav .lower-menu-link li > a {
+  margin: 0px;
+  color: #fff;
+  padding: 0.5rem !important;
+  transition-duration: 0.3s;
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: normal;
+  border-radius: 0px;
+  cursor: pointer !important;
+}
+section#lower-nav nav .lower-menu-link li > a:hover {
+  border-radius: 0;
+  color: #eeffb0;
+  text-decoration: none !important;
+}
+section#lower-nav nav .lower-menu-link li.active > a {
+  border-radius: 0;
+  color: #eeffb0 !important;
+  text-decoration: none !important;
+}
+section#lower-nav nav .lower-menu-link li:first-of-type > a:hover {
+  background: none;
+}
+section#lower-nav nav .lower-menu-link li > a > img {
+  height: 40px !important;
+}
+section#lower-nav nav .lower-menu-link li > a > img:hover {
+  background-color: rgba(255, 255, 255, 0);
+}
+section#lower-nav nav .lower-menu-link .sub-menu {
+  width: 100%;
+  background: #F1FBFF !important;
+  color: #160c0c;
+  position: fixed;
+  top: 111px;
+  left: 0;
+  right: 0;
+  transition-duration: 0.4s;
+  z-index: 500 !important;
+  display: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link {
+  display: flex;
+  align-items: start;
+  padding: 1rem;
+  padding-top: 1.5rem !important;
+  padding-bottom: 2rem;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link .extra-item {
+  width: 100%;
+  flex: 3;
+  text-align: left;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link .extra-item img {
+  width: 100%;
+  max-width: 350px;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link .extra-item .heading-text {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #2c5d73;
+  margin-top: 1rem;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link .extra-item .text {
+  font-size: 0.8rem;
+  max-width: 400px;
+  margin-top: 0.25rem;
+  color: #2c5d73;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link .link-container {
+  flex: 4;
+  display: flex;
+  justify-content: space-around;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul {
+  display: flex;
+  flex-direction: column !important;
+  align-items: flex-start;
+  margin-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul li {
+  padding: 0.25rem;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul li:first-child {
+  padding-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul li a {
+  font-size: 14px;
+  text-align: left !important;
+  letter-spacing: 1px !important;
+  color: #000;
+  font-weight: 500 !important;
+  text-transform: capitalize;
+  transition: all 0.35s;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul li a:first-child {
+  padding-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .sub-menu .all-link ul li a:hover {
+  opacity: 1 !important;
+  color: #2c5d73 !important;
+  text-decoration: underline !important;
+}
+section#lower-nav nav .lower-menu-link > li .sub-menu.show-mega-menu {
+  display: block !important;
+}
+section#lower-nav nav ul > li > a > img {
+  height: 30px !important;
+}
+
+#navbar.nav-resp #upper-nav nav {
+  height: 55px !important;
+}
+#navbar.nav-resp #upper-nav nav .logo-close-menu .logo img {
+  height: 35px !important;
+}
+#navbar.nav-resp #upper-nav nav .logo-close-menu #menu-bars {
+  font-size: 30px;
+}
+#navbar.nav-resp #upper-nav nav #menu-uiu-header-menu > li .sub-menu {
+  top: 55px !important;
+}
+@media screen and (max-width: 1000px) {
+  #navbar.nav-resp #lower-nav nav {
+    display: none !important;
+  }
+}
+#navbar.nav-resp #lower-nav nav .lower-menu-link {
+  margin-top: 0px;
+  width: 100vw;
+  justify-content: space-evenly;
+  display: inline-flex;
+}
+#navbar.nav-resp #lower-nav nav .lower-menu-link .menu-item {
+  padding: 0 !important;
+}
+#navbar.nav-resp #lower-nav nav .lower-menu-link .sub-menu {
+  top: 96px !important;
+}
+#navbar.nav-resp #lower-nav nav ul > li > a > img {
+  height: 30px !important;
 }
 
 #search-close {
@@ -2159,8 +2598,7 @@ section#lower-nav nav ul > li > a > img {
 
 #search-button:hover {
   background-color: #F68B1F;
-}/*# sourceMappingURL=navbar.css.map */
-
+}/*# sourceMappingURL=navbar-2.css.map */
 
 /* Archive Hero section */
 

functions.php

@@ -269,17 +269,25 @@ class Custom_Walker_Nav_Menu extends Walker_Nav_Menu
 	public function start_lvl(&$output, $depth = 0, $args = array())
 	{
 		// Add your extra element here.
-		$output .= '<div class="container">';
+
 
 		parent::start_lvl($output, $depth, $args);
+		$output .= '<div class="container"><div class="extra-item col-breaker">
+                      <img class="menu_feature_image" src="../wp-content/themes/uiu-cse/img/menu-background.jpg" alt="">
+                      <div class="heading-text menu_title">
+                        Research
+                      </div>
+                      <div class="text menu_description">
+                        We collect personal information from you so we can provide investment services to you.
+                      </div>
+                    </div>';
 	}
 
 	public function end_lvl(&$output, $depth = 0, $args = array())
 	{
-		parent::end_lvl($output, $depth, $args);
-
 		// Add your extra element here.
 		$output .= '</div>';
+		parent::end_lvl($output, $depth, $args);
 	}
 }
 
@@ -299,11 +307,11 @@ function insert_extra_element_to_submenu($matches)
 {
 	$sub_menu_ul = $matches[0];
 	$extra_element = '<div class="extra-item col-breaker">
-                      <img src="../wp-content/themes/uiu-cse/img/menu-background.jpg" alt="">
-                      <div class="heading-text">
+                      <img class="menu_feature_image" src="../wp-content/themes/uiu-cse/img/menu-background.jpg" alt="">
+                      <div class="heading-text menu_title">
                         Research
                       </div>
-                      <div class="text">
+                      <div class="text menu_description">
                         We collect personal information from you so we can provide investment services to you.
                       </div>
                     </div>';
@@ -320,7 +328,7 @@ function custom_add_extra_element_to_submenu($nav_menu, $args)
 	return $nav_menu;
 }
 
-add_filter('wp_nav_menu', 'custom_add_extra_element_to_submenu', 10, 2);
+// add_filter('wp_nav_menu', 'custom_add_extra_element_to_submenu', 10, 2);
 
 
 /**
@@ -330,7 +338,7 @@ add_filter('wp_nav_menu', 'custom_add_extra_element_to_submenu', 10, 2);
 
 function theme_options_route_menu()
 {
-	return get_field('menu_rich_content', 'option');
+	return get_field('menu_rich_contents', 'option');
 }
 
 add_action("rest_api_init", function () {

header.php

@@ -42,545 +42,18 @@
 						</a>
 					</div>
 
-
-					<ul class="upper-menu-link">
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>About</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Examinations</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Admission</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Research</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Student accommodation</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Media</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Careers Service</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Student portal</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Faculty</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Examinations</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Contact</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-
-						</li>
-
-						<li>
-							<a>
-								<span onclick="openSearch()">Search </span>
-							</a>
-						</li>
-
-					</ul>
+					<?php wp_nav_menu(array('theme_location' => 'uiu-header-menu', 'container_class' => 'custom-menu-class'));
+					?>
 
 				</nav>
 
 			</section>
 
-			<section id="lower-nav">
-
-				<nav class="container-fluid">
-					<ul class="lower-menu-link">
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>About</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
 
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Admission</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Examinations</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Faculties</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Careers Service</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Student portal</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Publication</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Student blog</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">Information for Employers</a></li>
-											<li><a href="#">Student accommodation</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Events & Notices</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Students & Alumni</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-										<ul>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-
-						<li class="menu-item">
-							<a class="menu-btn"><span>Contact</span></a>
-							<span class="menu-content">
-								<div class="all-link container">
-
-									<div class="extra-item">
-										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
-
-										<div class="heading-text">
-											Research
-										</div>
-										<div class="text">
-											We collect personal information from you so we can provide investment services to you.
-										</div>
-									</div>
-
-									<div class="link-container">
-
-
-										<ul>
-											<li><a href="#">Student portal</a></li>
-											<li><a href="#">Examinations</a></li>
-											<li><a href="#">Support and wellbeing</a></li>
-											<li><a href="#">Current students overview</a></li>
-											<li><a href="#">Student blog</a></li>
-										</ul>
-										<ul>
-											<li><a href="#">Careers Service</a></li>
-											<li><a href="#">Student accommodation</a></li>
-											<li><a href="#">Request a transcript</a></li>
-											<li><a href="#">BLOOM @ Senate House</a></li>
-											<li><a href="#">Information for Employers</a></li>
-										</ul>
-
-									</div>
-
-								</div>
-							</span>
-						</li>
-					</ul>
-				</nav>
-
-			</section>
 
 		</header>
 
-		<?php wp_nav_menu(array('theme_location' => 'uiu-header-menu', 'container_class' => 'custom-menu-class'));
-		?>
+
 
 
 		<!-- #masthead -->

header2.php

@@ -0,0 +1,586 @@
+<?php
+
+/**
+ * The header for our theme
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package UIU_CSE
+ */
+
+?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+
+<head>
+	<meta charset="<?php bloginfo('charset'); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="profile" href="https://gmpg.org/xfn/11">
+
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+	<?php wp_body_open(); ?>
+	<div id="page" class="site">
+		<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e('Skip to content', 'uiu-cse'); ?></a>
+
+		<header id="navbar">
+
+			<section id="upper-nav">
+
+				<nav class="container-fluid">
+
+					<div class="logo-close-menu">
+
+						<a class="logo" href="<?php echo get_site_url(); ?>"> <img src="<?php echo (get_header_image()); ?>" alt="<?php echo (get_bloginfo('title')); ?>" /></a>
+
+						<a id="menu-bars" class="material-icons">
+							menu
+						</a>
+					</div>
+
+
+					<ul class="upper-menu-link">
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>About</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Examinations</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Admission</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Research</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Student accommodation</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Media</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Careers Service</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Student portal</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Faculty</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Examinations</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Contact</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+
+						</li>
+
+						<li>
+							<a>
+								<span onclick="openSearch()">Search </span>
+							</a>
+						</li>
+
+					</ul>
+
+				</nav>
+
+			</section>
+
+			<section id="lower-nav">
+
+				<nav class="container-fluid">
+					<ul class="lower-menu-link">
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>About</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Admission</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Examinations</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Faculties</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Careers Service</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Student portal</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Publication</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Student blog</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">Information for Employers</a></li>
+											<li><a href="#">Student accommodation</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Events & Notices</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Students & Alumni</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+										<ul>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+
+						<li class="menu-item">
+							<a class="menu-btn"><span>Contact</span></a>
+							<span class="menu-content">
+								<div class="all-link container">
+
+									<div class="extra-item">
+										<img src="<?php echo (get_template_directory_uri()) ?>/img/menu-background.jpg" alt="">
+
+										<div class="heading-text">
+											Research
+										</div>
+										<div class="text">
+											We collect personal information from you so we can provide investment services to you.
+										</div>
+									</div>
+
+									<div class="link-container">
+
+
+										<ul>
+											<li><a href="#">Student portal</a></li>
+											<li><a href="#">Examinations</a></li>
+											<li><a href="#">Support and wellbeing</a></li>
+											<li><a href="#">Current students overview</a></li>
+											<li><a href="#">Student blog</a></li>
+										</ul>
+										<ul>
+											<li><a href="#">Careers Service</a></li>
+											<li><a href="#">Student accommodation</a></li>
+											<li><a href="#">Request a transcript</a></li>
+											<li><a href="#">BLOOM @ Senate House</a></li>
+											<li><a href="#">Information for Employers</a></li>
+										</ul>
+
+									</div>
+
+								</div>
+							</span>
+						</li>
+					</ul>
+				</nav>
+
+			</section>
+
+		</header>
+
+		<?php wp_nav_menu(array('theme_location' => 'uiu-header-menu', 'container_class' => 'custom-menu-class'));
+		?>
+
+
+		<!-- #masthead -->

inc/acf-json/group_642c43069a7c8.json

@@ -4,7 +4,24 @@
     "fields": [
         {
             "key": "field_642c4307f3843",
-            "label": "Header Setting",
+            "label": "Header Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "left",
+            "endpoint": 0
+        },
+        {
+            "key": "field_648b078da2c28",
+            "label": "Sitewide header adjustment",
             "name": "",
             "aria-label": "",
             "type": "message",
@@ -17,15 +34,15 @@
                 "id": ""
             },
             "message": "",
-            "new_lines": "wpautop",
-            "esc_html": 0
+            "esc_html": 0,
+            "new_lines": "wpautop"
         },
         {
             "key": "field_642c43522e9ee",
             "label": "Footer Settings",
             "name": "",
             "aria-label": "",
-            "type": "message",
+            "type": "tab",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -34,9 +51,8 @@
                 "class": "",
                 "id": ""
             },
-            "message": "",
-            "new_lines": "wpautop",
-            "esc_html": 0
+            "placement": "left",
+            "endpoint": 0
         }
     ],
     "location": [
@@ -57,5 +73,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1680622432
+    "modified": 1686834358
 }

inc/acf-json/group_648ad0b0ca222.json

@@ -1,11 +1,45 @@
 {
     "key": "group_648ad0b0ca222",
-    "title": "Menu Options",
+    "title": "Menu Settings",
     "fields": [
+        {
+            "key": "field_648b0d653c8d1",
+            "label": "Menu Presentation",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "left",
+            "endpoint": 0
+        },
+        {
+            "key": "field_648b021524f7d",
+            "label": "Header Menu Contents",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "left",
+            "endpoint": 0
+        },
         {
             "key": "field_648ad18328484",
-            "label": "Menu Rich content",
-            "name": "menu_rich_content",
+            "label": "Menu Rich contents",
+            "name": "menu_rich_contents",
             "aria-label": "",
             "type": "repeater",
             "instructions": "",
@@ -16,12 +50,13 @@
                 "class": "",
                 "id": ""
             },
+            "layout": "row",
+            "pagination": 0,
             "min": 0,
             "max": 0,
-            "rows_per_page": 20,
-            "layout": "table",
-            "button_label": "Add Row",
             "collapsed": "",
+            "button_label": "Add Row",
+            "rows_per_page": 20,
             "sub_fields": [
                 {
                     "key": "field_648ad0b1a815d",
@@ -96,7 +131,7 @@
                     "label": "Menu Description",
                     "name": "menu_description",
                     "aria-label": "",
-                    "type": "wysiwyg",
+                    "type": "textarea",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -105,11 +140,11 @@
                         "class": "",
                         "id": ""
                     },
-                    "tabs": "all",
-                    "toolbar": "full",
-                    "media_upload": 1,
                     "default_value": "",
-                    "delay": 0,
+                    "maxlength": "",
+                    "rows": 5,
+                    "placeholder": "",
+                    "new_lines": "",
                     "parent_repeater": "field_648ad18328484"
                 }
             ]
@@ -120,7 +155,7 @@
             {
                 "param": "options_page",
                 "operator": "==",
-                "value": "uiu-cse-general-settings"
+                "value": "uiu-cse-menu-settings"
             }
         ]
     ],
@@ -133,5 +168,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 1,
-    "modified": 1686822076
+    "modified": 1686834614
 }

inc/acf-settings.php

@@ -76,6 +76,13 @@ if (function_exists('acf_add_options_page')) {
         'parent_slug'    => 'uiu-cse-general-settings',
     ));
 
+    acf_add_options_sub_page(array(
+        'page_title'     => 'Department of CSE: Menu Rich Contents',
+        'menu_title'    => 'Menu Settings',
+        'slug' => 'uiu-cse-menu-settings',
+        'parent_slug'    => 'uiu-cse-general-settings',
+    ));
+
     acf_add_options_sub_page(array(
         'page_title'     => 'Department of CSE: API Settings',
         'menu_title'    => 'API Settings',

js/theme-settings.js

@@ -14,16 +14,49 @@ window.onscroll = function () {
   }
 };
 
+// show mega menu in upper nav
+// const menuItem = document.querySelectorAll(".menu-item");
+
+// // const allMenuBtn = document.querySelectorAll(".menu-btn");
+// const allMenuContent = document.querySelectorAll(".menu-content");
+
+// if (menuItem) {
+//   menuItem.forEach((item) => {
+//     const menuBtn = item.querySelector(".menu-btn");
+//     const menuContent = item.querySelector(".menu-content");
+
+//     menuBtn.addEventListener("click", () => {
+//       if (menuContent) {
+//         menuContent.classList.toggle("show-mega-menu");
+//         item.classList.toggle("active");
+//       }
+
+//       menuItem.forEach((singleItem) => {
+//         if (singleItem !== item) {
+//           singleItem.classList.remove("active");
+//         }
+//       });
+
+//       allMenuContent.forEach((content) => {
+//         if (menuContent !== content) {
+//           content.classList.remove("show-mega-menu");
+//           // item.classList.remove('active')
+//         }
+//       });
+//     });
+//   });
+// }
+
 // show mega menu in upper nav
 const menuItem = document.querySelectorAll(".menu-item");
 
 // const allMenuBtn = document.querySelectorAll(".menu-btn");
-const allMenuContent = document.querySelectorAll(".menu-content");
+const allMenuContent = document.querySelectorAll(".sub-menu");
 
 if (menuItem) {
   menuItem.forEach((item) => {
-    const menuBtn = item.querySelector(".menu-btn");
-    const menuContent = item.querySelector(".menu-content");
+    const menuBtn = item.querySelector("a");
+    const menuContent = item.querySelector(".sub-menu");
 
     menuBtn.addEventListener("click", () => {
       if (menuContent) {
@@ -46,6 +79,61 @@ if (menuItem) {
     });
   });
 }
+
+// fetch submenu extra item data
+const fetchMenudata = async () => {
+  try {
+    const res = await fetch("https://cse.uiu.local/wp-json/options/menu", {
+      method: "GET",
+    });
+    const data = await res.json();
+
+    return data;
+  } catch (error) {
+    console.log(`Error: ${error}`);
+  }
+};
+
+fetchMenudata().then((data) => {
+  // adding menu data into html
+  addDataToMenu(data);
+});
+
+function addDataToMenu(data) {
+  if (data) {
+    console.log(data);
+    const menuItem = document.querySelectorAll(".menu-item");
+
+    if (menuItem) {
+      menuItem.forEach((item) => {
+        const targetData = data.find((data) =>
+          item.className.includes(data.menu_parent_class)
+        );
+
+        const menuTitle = item.querySelector(".menu_title");
+
+        const menuDesc = item.querySelector(".menu_description");
+
+        const menuFeatureImage = item.querySelector(".menu_feature_image");
+
+        if (targetData && menuFeatureImage) {
+          menuFeatureImage.src = targetData.menu_feature_image;
+        }
+
+        if (targetData && menuTitle) {
+          menuTitle.innerHTML = targetData.menu_title;
+        }
+
+        if (targetData && menuDesc) {
+          menuDesc.innerHTML = targetData.menu_description;
+        }
+      });
+    }
+  }
+}
+
+// fetch submenu extra item data end
+
 // accordion
 const accordionAll = document.querySelectorAll("#accordion");