Mega menu added

css/theme-styles.css

@@ -33,16 +33,8 @@ section {
   padding: 0px !important;
 }
 
-header {
-  margin: 0px;
-  padding: 0px !important;
-  height: 100vh;
-  overflow: hidden;
-}
-
 main {
-  position: relative;
-  padding: 0px !important;
+  padding-top: 111px;
   background-color: #fff;
 }
 
@@ -1777,4 +1769,385 @@ span.degree {
     font-size: 0.75em;
     font-style: italic;
     font-family: inherit;
-}
+}
+
+/* nav */
+
+#navbar {
+  position: fixed;
+  padding: 0;
+  margin: 0 !important;
+}
+#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;
+}
+#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 #menu-bars {
+  display: none;
+  transition-duration: 0.4s;
+  cursor: pointer;
+}
+@media (max-width: 1100px) {
+  #navbar #upper-nav nav .logo-close-menu #menu-bars {
+    display: block !important;
+    margin: 0px auto;
+    margin-right: 10px !important;
+    font-size: 45px;
+    color: #fff;
+  }
+}
+#navbar #upper-nav nav .upper-menu-link {
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+#navbar #upper-nav nav .upper-menu-link > li {
+  margin-right: 50px;
+}
+#navbar #upper-nav nav .upper-menu-link > li:last-child {
+  margin-right: 0px;
+}
+#navbar #upper-nav nav .upper-menu-link > li:last-child {
+  margin-right: 0;
+}
+#navbar #upper-nav nav .upper-menu-link > 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;
+}
+#navbar #upper-nav nav .upper-menu-link > li:after {
+  content: "";
+  display: block;
+  margin: auto;
+  height: 1px;
+  width: 0px;
+  background: transparent;
+  transition: width 0.3s ease, background-color 0.5s ease;
+}
+#navbar #upper-nav nav .upper-menu-link > li:hover:after {
+  width: 100%;
+  background: #fff;
+}
+#navbar #upper-nav nav .upper-menu-link > li.active:after {
+  width: 100%;
+  background: #fff;
+}
+#navbar #upper-nav nav .upper-menu-link > li .menu-content {
+  width: 100%;
+  background: #FFFBF6 !important;
+  color: #160c0c;
+  position: fixed;
+  top: 70px;
+  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);
+}
+#navbar #upper-nav nav .upper-menu-link > 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 {
+  width: 100%;
+  flex: 3;
+  text-align: left;
+}
+#navbar #upper-nav nav .upper-menu-link > 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 {
+  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 {
+  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 {
+  flex: 4;
+  display: flex;
+  justify-content: space-around;
+}
+#navbar #upper-nav nav .upper-menu-link > 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 {
+  padding: 0.25rem !important;
+}
+#navbar #upper-nav nav .upper-menu-link > 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 {
+  font-size: 14px;
+  text-align: left !important;
+  color: #000;
+  letter-spacing: 1px !important;
+  font-weight: 500 !important;
+  text-transform: capitalize;
+  transition: all 0.35s;
+}
+#navbar #upper-nav nav .upper-menu-link > 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 {
+  opacity: 1 !important;
+  color: #994D33 !important;
+  text-decoration: underline;
+}
+#navbar #upper-nav nav .upper-menu-link > li .menu-content.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 .menu-content {
+  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 .menu-content .all-link {
+  display: flex;
+  align-items: start;
+  padding: 1rem;
+  padding-top: 1.5rem !important;
+  padding-bottom: 2rem;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link .extra-item {
+  width: 100%;
+  flex: 3;
+  text-align: left;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link .extra-item img {
+  width: 100%;
+  max-width: 350px;
+}
+section#lower-nav nav .lower-menu-link .menu-content .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 .menu-content .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 .menu-content .all-link .link-container {
+  flex: 4;
+  display: flex;
+  justify-content: space-around;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link ul {
+  display: flex;
+  flex-direction: column !important;
+  align-items: flex-start;
+  margin-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link ul li {
+  padding: 0.25rem;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link ul li:first-child {
+  padding-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .menu-content .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 .menu-content .all-link ul li a:first-child {
+  padding-top: 0 !important;
+}
+section#lower-nav nav .lower-menu-link .menu-content .all-link ul li a:hover {
+  opacity: 1 !important;
+  color: #2c5d73 !important;
+  text-decoration: underline !important;
+}
+section#lower-nav nav .lower-menu-link > li .menu-content.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 .upper-menu-link > li .menu-content {
+  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 .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 */

header.php

@@ -27,45 +27,555 @@
 	<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="masthead" class="site-header">
-			<section id="first-nav-section">
-				<nav id="first-nav" class="container-fluid">
-					<ul>
-						<a href="<?php echo get_site_url(); ?>"> <img src="<?php echo (get_header_image()); ?>" alt="<?php echo (get_bloginfo('title')); ?>" /></a>
-						<li><a><span onclick="openNav()">About</span></a></li>
-						<li><a><span onclick="openNav()">Admission</span></a></li>
-
-						<li><a><span onclick="openNav()">Research</span></a></li>
-						<li><a><span onclick="openNav()">Media</span></a></li>
-						<li><a><span onclick="openNav()">Faculty</span></a></li>
-						<li><a><span onclick="openNav()">Contact</span></a></li>
+		<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>
-						<li>
 
 					</ul>
-					<span onclick="openNav()" id="menu-bars" class="material-icons">
-						menu
-					</span>
+
 				</nav>
+
 			</section>
 
-			<section id="second-nav-section" class="primary-c">
-				<nav id="second-nav" class="container-fluid primary-c">
-					<ul>
-						<li><a href="#"><span onclick="openNav()">CSE Home</span></a></li>
-						<li><a href="#"><span onclick="openNav()">About</span></a></li>
-						<li><a href="#"><span onclick="openNav()">UG Program (B.Sc in CSE)</span></a></li>
-						<li><a href="#"><span onclick="openNav()">Graduate Program (M.Sc in CSE)</span></a></li>
-						<li><a href="#"><span onclick="openNav()">Research</span></a></li>
-						<li><a href="#"><span onclick="openNav()">CSE Faculty</span></a></li>
-						<li><a href="#"><span onclick="openNav()">Alumni</span></a></li>
-						<li><a href="#"><span onclick="openNav()">Contact</span></a></li>
+			<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><!-- #masthead -->
+
+		</header>
+		<!-- #masthead -->

js/theme-settings.js

@@ -1,17 +1,52 @@
 // const sidebar = document.querySelector('#sidebar')
 
+// const sidebar = document.querySelector('#sidebar')
+
 window.onscroll = function () {
-  let navbar = document.querySelector("nav#first-nav");
+  let navbar = document.querySelector("#navbar");
   let secondNav = document.querySelector("nav#second-nav");
   if (window.scrollY > 300) {
-    if (secondNav) secondNav.classList.add("second-nav-active");
+    if (navbar) navbar.classList.add("second-nav-active");
     navbar.classList.add("nav-resp");
   } else {
-    if (secondNav) secondNav.classList.remove("second-nav-active");
+    if (navbar) navbar.classList.remove("second-nav-active");
     navbar.classList.remove("nav-resp");
   }
 };
 
+// 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')
+        }
+      });
+    });
+  });
+}
+
 // const buttons = document.querySelectorAll("[data-carousel-button]")
 
 document.querySelectorAll("[data-banner-slider-button]").forEach((button) => {

single-news.php

@@ -102,14 +102,6 @@ get_header(); ?>
 
 <?php endwhile; ?>
 <style>
-	p {
-		max-width: 100% !important;
-	}
-
-	header {
-		height: 100px !important;
-	}
-
 	#news-single-header h5 {
 		margin-top: 30px;
 		font-size: 30px;