Develop Reference

How to make a sticky Navigation Bar | HTML, CSS & JS

I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>

How can I fix the look of child 1 under a dropdown navbar?

How can I fix the look of child 1 under dropdown NavBar? Also, how easy is it to change this into a flexbox, and make a button to make the code less cluttered via JavaScript?
I want the #dropDown as the parent navbar item and #child as the child of that navbar item. without a large white space bar (please run the code in full screen to see)
Also, I would like the bar to be visible on mobile. Some elements show up, but the Contact does not show up.
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
CSS Nav
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Our Work</li>
<li>
dropDown
<ul>
<li>child 1</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>

How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

I am trying to create a responsive web page navigation bar. I want the logo on the left, the navigation links center, and social media links on the right. When the page width gets too small, it is supposed to hide the navigation links and social media links. This is effectively working correctly however the social media links are jumping below the navigation bar when the page is too narrow but before it reaches full "mobile" width. Also, I am having trouble placing the social links in one line when the hamburger menu is open. I am not a web developer, just a tutorial watcher and any help would be greatly appreciated.
I have tried changing the class type for the .social class but this seems to only make matters worse.
EDIT: I solved the overflow problem by adding "overflow: hidden;" under ".navbar ul{"
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");
navbarToggler.addEventListener("click", navbarTogglerClick);
function navbarTogglerClick() {
navbarToggler.classList.toggle("open-navbar-toggler");
navbarMenu.classList.toggle("open");
}
navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));
function navbarLinkClick() {
if(navbarMenu.classList.contains("open")) {
navbarToggler.click();
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Righteous', cursive;
background-color: #fff;
color: #333;
}
.navbar {
background-color: #000;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
width: 100%;
height: 80px;
line-height: 80px;
font-size: 18px;
padding: 0 30px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.navbar a {
text-decoration: none;
color: #fff;
}
.navbar a.navbar-brand {
float: left;
height: inherit;
line-height: inherit;
padding: 0 30px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 28px;
font-weight: 700;
}
.navbar ul {
float: center;
list-style: none;
height: inherit;
line-height: inherit;
padding: 0 50px;
overflow: hidden;
}
/*Social Stuff*/
.social{
float: right;
background-color: coral;
font-size: 35px;
display: inline-block;
}
/*Social Stuff*/
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 0 30px;
}
.navbar ul li a:hover {
background-color: transparent;
color:#00e713;
transition:0.2s all;
transform:scale(1.2) rotate(10deg);
}
.navbar .navbar-toggler {
display: none;
}
.intro {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
background-size: cover;
background-color: #000;
}
.container {
position: relative;
height: 100vh;
color: #fff;
}
.container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20vh;
}
#html { background-color: #e34f26; }
#css { background-color: #002561; }
#javascript { background-color: #333; }
#media (max-width: 991px) {
.navbar ul {
padding: 0 10px;
}
.navbar ul li a {
min-width: 100px;
padding: 0 20px;
}
#media (max-width: 767px) {
.navbar a.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar {
padding: 0;
}
.navbar ul {
width: 100%;
padding: 0;
background-color: rgba(0,0,0,0.9);
/*height: auto; */
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all ease-in-out 0.3s;
}
.navbar ul.open {
max-height: 100vh;
/*this next line prevents the navbar overlap on mobile */
padding-block-start: 9vh;
}
/*Social Stuff*/
.social{
width: 100%;
float: left;
text-align: center;
}
.social ul li{
display: inline;
float: left;
}
/*Social Stuff*/
.navbar ul li {
width: 100%;
/*border-bottom: 1px solid rgba(255,255,255,0.3); */
}
.navbar ul li a {
padding: 0px;
}
.navbar .navbar-toggler {
display: block;
position: absolute;
height: 40px;
top: 20px;
left: 20px;
background-color: transparent;
color: #fff;
/* border: 3px solid #fff;*/
border: none;
/* border-radius: 4px; */
outline: none;
padding: 0 5px;
cursor: pointer;
}
.navbar .navbar-toggler span,
.navbar .navbar-toggler span::before,
.navbar .navbar-toggler span::after {
display: block;
content: '';
background-color: #fff;
height: 3px;
width: 28px;
border-radius: 4px;
transition: all ease-in-out 0.3s;
}
.navbar .navbar-toggler span::before {
transform: translateY(-8px);
}
.navbar .navbar-toggler span::after {
transform: translateY(5px);
}
.navbar .navbar-toggler.open-navbar-toggler span {
/* transform: rotate(90deg); */
background-color: transparent;
/* transform: scale(0.85) rotate(270deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::before {
transform: translateY(0px) rotate(45deg);
/* transform: translateY(0px) scale(0.75) rotate(45deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::after {
transform: translateY(-3px) rotate(-45deg);
/* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Navbar</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar">
<button class="navbar-toggler">
<span></span>
</button>
<a href="#" class="navbar-brand">
<span>T</span>e<span>m</span>P</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<div class="social">
<li><i class ="fa fa-twitch"></i></li>
<li><i class ="fa fa-reddit"></i></li>
<li><i class ="fa fa-twitter"></i></li>
<li><i class ="fa fa-youtube"></i></li>
</div>
</ul>
</nav>
<script src="assets/js/script.js"></script>
</body>
<p>
</p>
</html>

First, you should decide your layout at what breakpoint you want to change the layout of navigation based on that we can write your styles within those media queries. Those things which you don't need on the mobile layout such as social links you can simply make display: none; to the social section but only in the mobile media query.

Actually your HTML structure is messy but anyhow, update this style in media query #media (max-width: 767px)
.social li {
width: auto;
margin-right: -18px;
float: none
}

Problems with the responsive navigation menu

I have a problem with my navigation menu... it works great on desktops and notebooks, but not on mobile devices.
So, someone can help-me?
Here is the following code for the menu in Desktops/Notebooks screens:
#media only screen and (min-width: 768px) {
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: #b42024;
text-decoration: none;
color: #fff;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 23px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: #b42024;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__li a.active-sub {
background: #fff;
color: #000;
text-decoration: none;
}
}
input#control-nav {
visibility: hidden;
position: absolute;
left: -9999px;
opacity: 0;
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I try to transform this menu in Responsive... and i get this:
#media (max-width: 767px) {
.control-nav { /* label icon */
position: absolute;
right: 20px;
top: 20px;
display: block;
width: 30px;
padding: 5px 0;
border: solid #333;
border-width: 3px 0;
z-index: 2;
cursor: pointer;
}
.control-nav:before {
content: "";
display: block;
height: 3px;
background: #333;
}
.control-nav-close {
position: fixed; /* label layer */
right: 0;
top: 0;
bottom: 0;
left: 0;
display: block;
z-index: 1;
background: rgba(0,0,0,0.4);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/* checked nav */
input#control-nav {
visibility: visible;
}
input#control-nav:focus ~ .control-nav {
border-color: #000;
box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
}
input#control-nav:focus ~ .control-nav:before {
background: #000;
}
input#control-nav:checked ~ nav,
input#control-nav:checked ~ .control-nav-close {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
/ nav
*/
nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 250px;
border-left: 1px solid #ccc;
background: #fff;
overflow-x: auto;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
nav ul {
list-style: none;
background: #1c1c1c;
padding: 5px 0;
}
nav li a {
display: block;
padding: 0 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
line-height: 2em;
height: 2em;
border-bottom: 1px solid #383838;
}
nav li:last-child a {
border-bottom: none;
}
nav li a:hover,
nav li a:focus {
color: #1c1c1c;
background: #ccc;
}
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I appreciate it the help!
Oh and sorry for my English!, It's not great.

Z-index issue on navbar

I'm having some issues with my navbar menu for my site. I want to have the main menu, a sub menu and a sub menu to that. So 3 levels total.
So far I have gotten the 2 levels to work, but I cannot get the 3rd level to go under the 2nd with z-indexing. Currently they are only on the same index it appears.
Anything I've tried messes up with the jQuery script I did for displaying the select instead of the menu when on small screens.
So how can I do this?
Fiddle (Go Products > Oticon).
HTML
<header>
<select class="menu_mobile_top">
<option>Home</option>
<option>Services</option>
<option>Products</option>
<option>Shop</option>
<option>Prices</option>
<option>About</option>
<option>Contact</option>
</select>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul class="subnav">
<li role="presentation">Service 1
<li role="presentation">Service 2
<li role="presentation">Service 3
</ul>
</li>
<li role="presentation">Products
<ul class="subnav">
<li role="presentation">Phonak</li>
<li role="presentation">ReSound</li>
<li role="presentation">Siemens</li>
<li role="presentation">Starkey</li>
<li role="presentation">Widex</li>
<li role="presentation">Oticon
<ul class="subnavoptions">
<li role="presentation">Test1</li>
<li role="presentation">Test 2</li>
</ul>
</li>
<li role="presentation">Unitron</li>
<li role="presentation">Bernafon</li>
</ul>
</li>
<li role="presentation">Shop</li>
<li role="presentation">Prices</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</header>
CSS
body {
font-size: 0;
text-align: center;
background-image: url('../images/bg.png');
background-repeat: repeat;
font-family: 'Montserrat', sans-serif;
}
header {
width: 100%;
height: 50px;
background: #304770;
z-index: 10;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 34pt;
}
a {
text-decoration: none;
color: inherit;
}
nav {
position: relative;
width: 100%;
z-index: 10;
}
a:hover {
text-decoration: none;
color: inherit;
}
::-webkit-input-placeholder {
color: #99C2EC;
}
:-moz-placeholder { /* Firefox 18- */
color: #99C2EC;
}
::-moz-placeholder { /* Firefox 19+ */
color: #99C2EC;
}
:-ms-input-placeholder {
color: #99C2EC;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.logo-div {
padding: 15px 0 10px;
}
.logo-div div {
display: inline-block;
width: 50%;
font-size: 14px;
color: #304770;
}
.center {
margin: 0 auto;
}
.nav-offset {
display: inline-block;
}
.nav {
height: 50px;
display: block;
position: relative;
list-style: none;
background: #304770;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
position: static;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav > li.active > a:before {
width: 100%;
}
.nav li:hover > a {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav > li > a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.nav > li:nth-last-of-type(1) > a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav > li > a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.nav li:hover .subnav {
top: 49px;
}
.subnav {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 12px;
z-index: -1;
left: 0;
margin: 0;
padding: 0;
background-color: #ccc;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnav > li {
display: inline-block;
background-color: #ccc;
margin: 0;
padding: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.subnav li:hover .subnavoptions {
top: 36px;
}
.subnavoptions {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 0px;
z-index: -2;
left: 0;
margin: 0;
padding: 0;
background-color: #EFEFEF;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnavoptions li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnavoptions li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.menu_mobile_top {
display: none;
position: relative;
font-size: 16px;
top: 5px;
background-color: #2A333F;
border: 1px solid transparent;
color: #EFEFEF;
width: 250px;
margin: 5px 0;
padding: 3px;
}
.menu_mobile_top:focus, option:focus {
outline: none !important;
border-color: orange;
}

I don't see the styles defined for third level menu. Add the following and try.
.subnavoptions li a li{
top:50px;
}