Develop Reference

Footer has a white space to the right

Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>

Add body {margin: 0;} to reset default margin.

At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)

The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR

Navigation Overlay Hamburger Menu Click Issues

I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* width: 80%; */
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG

To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.

Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

slide panel menu back button not working

I'm trying to write slide panel navigation. My backward button is not working. Here I'm including my working file on js-fiddle. And also please note that The "ABOUT" page have child element.
Click to get fiddle
Please help me to come back on its previous stage, when click on the "Close" button.

try this...
$(".back").on('click', function(){
$(".main-navigation").removeClass("open-panel");
});

This is some what from your desired output
$(document).ready(function() {
$(".main-navigation ul").prepend("<li class='back'><a href='#' title='Close'>close</a></li>");
$(".menu-trigger").click(function() {
$(".main-navigation").addClass("open-panel");
});
$(".main-navigation li").click(function() {
$(".main-navigation li ul").addClass("open-panel");
});
$(".main-navigation li").has("ul").addClass("sub-child");
$(".back").on('click', function() {
$("#mainNav").removeClass().addClass('main-navigation');
$("#mainNav ul li ul").removeClass();
});
});
.top-header {
background-color: #3173d0;
color: #fff;
font-size: 1rem;
min-height: 40px;
padding-top: 8px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.top-header .menu-trigger {
background-color: #103669;
color: #fff;
height: 40px;
left: 0;
position: absolute;
;
text-align: center;
top: 0;
width: 40px;
}
/* Mobile Sliding Panel Section */
.main-navigation {
background-color: #103669;
color: #fff;
left: -100%;
min-height: 100%;
position: absolute;
text-transform: capitalize;
top: 0;
z-index: 2;
}
.main-navigation:after,
.main-navigation:before {
content: '';
display: table;
}
.main-navigation:after {
clear: both;
}
.main-navigation ul {
background-color: #103669;
display: block;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 220px;
}
.main-navigation ul ul {
left: -100%;
}
.open-panel {
left: 0 !important;
transition: all ease 0.4s;
-o-transition: all ease 0.4s;
-webkit-transition: all ease 0.4s;
}
.back {
position: relative;
}
.close-panel {
left: -100%;
}
.main-navigation ul {
display: block;
}
.main-navigation ul li {
border-bottom: #2258a4 solid 1px;
display: block;
}
.main-navigation a {
color: #fff;
display: block;
font-size: 0.8125rem;
padding: 10px 15px;
text-align: left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html {
font-size: 16px;
}
body {
background-color: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 0.875rem;
}
a {
color: #4b4b4b;
text-transform: capitalize;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
ul:after,
ul:before,
li:after,
li:before {
content: '';
display: table;
}
ul:after,
li:after {
clear: both;
}
ul,
li,
h1,
h2 {
margin: 0;
padding: 0;
}
button,
input[type=submit],
input[type=reset] {
border: none;
cursor: pointer;
}
<section class="top-header">
sliding panel demo
<button class="menu-trigger"><i class="fa fa-bars"></i></button>
<nav class="main-navigation" id="mainNav">
<ul>
<li>home</li>
<li>about us
<ul>
<li>company</li>
<li>vision</li>
<li>mission</li>
</ul>
</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The problem is you add $(".main-navigation li").click() class in this and $(".back") here you removed it so it performs both and got wrong output on second time when you close child menu also n reopen it.Do work on it..I suggested 50% solution :)

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;
}

Can't get active navigation to work on site

No matter what I do, I can't seem to get the active navigation to work on my site. Here's the URL: http://helloarchie.blue
As far as I can tell, the URLs are correct (bar categories) but I'm getting confused with the navigation CSS.
Here's the HTML:
<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
<div class="cbp-hsinner">
<ul class="cbp-hsmenu">
<li><span class="navi">01</span> Home</li>
<li><a class="arrow" href="#"><span class="navi">02</span> Categories</a>
<ul class="cbp-hssubmenu">
<li><span>Personal</span></li>
<li><span>Informative</span></li>
<li><span>Guides</span></li>
<li><span>Reviews</span></li>
<li><span>#fashionfriday</span></li>
<li><span>Humour</span></li>
</ul>
</li>
<li><span class="navi">03</span> About</li>
<li><span class="navi">04</span> Archives</li>
</ul>
</div>
</nav>
CSS:
.cbp-hsmenu-wrapper .cbp-hsmenu {
width: 100%;
margin: 0 auto;
text-align: center;
background: #2fdcce;
position: fixed;
}
.cbp-hsmenu > li {
display: inline-block;
margin-left: 0em;
}
.cbp-hsmenu > li:after {
content: "";
padding: 0 10px;
color: #383d3d;
display: inline-block;
}
.cbp-hsmenu > li:last-child:after {
content: "";
color: #383d3d;
display: inline-block;
}
.cbp-hsmenu > li:first-child {
margin-left: 3em;
}
.cbp-hsmenu > li > a {
color: #fff;
font-family: 'brandon-grotesque', arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85em;
line-height: 3.5em;
display: inline-block;
position: relative;
z-index: 10000;
outline: none;
letter-spacing: 0.1em;
}
.cbp-hsmenu > li > a.active { color: #1dbbae; }
.cbp-hsmenu > li.log { margin-right: 160px; font-size: 1.3em; font-weight: 900; }
.cbp-hssubmenu {
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 0;
text-align: center;
visibility: hidden;
background: #fff;
}
.cbp-hssubmenu:before,
.cbp-hssubmenu:after {
content: " ";
display: table;
}
.cbp-hssubmenu:after {
clear: both;
}
.cbp-hssubmenu > li {
width: 16.2%;
display: inline-block;
vertical-align: top;
opacity: 0;
-webkit-transition: opacity 0.1s 0s;
-moz-transition: opacity 0.1s 0s;
transition: opacity 0.1s 0s;
}
.cbp-hssubmenu > li a {
display: block;
text-align: center;
color: #383A3d;
font-family: 'brandon-grotesque', arial, sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 0.7em;
outline: none;
padding: 1em 0.5em 0.5em 0.5em;
letter-spacing: 0.3em;
}
.cbp-hssubmenu > li a span {
display: block;
min-height: 0.8em;
padding-bottom: 5px;
}
.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {
z-index: 1000;
visibility: visible;
}
.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu > li {
opacity: 1;
-webkit-transition: opacity 0.5s 0.1s;
-moz-transition: opacity 0.5s 0.1s;
transition: opacity 0.5s 0.1s;
}
JS:
jQuery(function() {
jQuery('.cbp-hsmenu > li > a').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});