We Keep Coding

How to Make Nav Hidden When Clicked Outside Of It

I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}
With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').
/*window.onclick = function (event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}*/
function myFunction(x) {
x.classList.toggle("change");
}
function dropdown() {
document.getElementById("myDropdown").style.display = "block"
}
window.onclick = function(event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
height: 5rem;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 400ms;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
nav a,
nav button {
color: white;
text-decoration: none;
font-size: 1.25rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover,
nav .dropdown:hover>button {
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.arrow {
border: solid #222;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 4px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.dropdown:hover .arrow {
border: solid black;
border-width: 0 3px 3px 0;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
text-align: left;
padding: 0;
margin-top: .5em;
margin-left: .5em;
margin-bottom: .5em;
}
.show {
display: block;
}
<header id="top-nav">
<label for="navToggle" class="nav-toggle-label">
<span
><div class="nav-toggle-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div
></span>
</label>
<input type="checkbox" id="navToggle" class="nav-toggle" />
<nav class="nav">
<ul>
<li>
Home
</li>
<li>About</li>
<li>
<div class="dropdown">
<button class="dropdown-button" onclick="dropdown()">
Classes <i class="arrow down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<div class="colums">
<h1>Semester 1</h1>
Physics 11
Chemistry 11
English 11
French 11
<h1>Semester 2</h1>
Gym 11
Psychology 11
Law 11
Pre-calculus 11
</div>
</div>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>

Try to use eventListener everywhere
window.addEventListener("click", event => {
const tgt = event.target.closest('.top-nav');
if (!tgt && document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
})

First Time Click in hamburger

I want to ask a question when I click on my navigation bar menu icon that I have from font awesome it does not open my menu first time but when I click again I on the navigation bar I will be more cleared by these images and situations.
First time click:
Image of first time clicked
Second time click - it opens means clicking two times :
The image after clicking second time
My html code
function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
if (navLis.style.marginTop === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
Edit : My media queries
#media screen and (max-width:668px)
{
nav
{ height: 64px; transition: 1s!important; }
nav li
{ text-align: center; display: block; transition: all 1s linear!important; }
#navLis { transition: margin-top .3s ease-in .2s!important; display: block; margin-top: -250px; background: black; z-index: 11; }
nav i {
display: block!important;
}
.home_container{
height: 80vh;
}
}

The problem is that you've not included the margin-top: -250px in the style attribute at first.
so navLis.style.marginTop === '-250px' will return false at first and the else block will be executed.
so you have to add the style attribute to your #navList like this:
<div id="navLis" style="margin-top: -250px">

function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
let top = window.getComputedStyle(navLis, null).getPropertyValue("margin-top");
if (top === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>

Change text and image/video on click and scroll

I'm just a novice. I know some html, but I have no idea how to do the following:
there is an html page, it has a section or div with 3 columns (1st column - text, 2nd - video, in the 3rd column there are 4 links).
When the user scrolls to this section, I need the page to stop (I would like to but not necessarily), and while the person scrolls, it should change the text in the 1st column and the video in the 2nd(both same time) . And also the user should be able to scroll through these videos&text by clicking on the links in the 3rd column. How it is done here: fleet-app
It's written in React, so I can't to spy the solution.
I found this solution Javascript - change image and text on select, but I can't figure out how to apply it in my situation.
Is it possible to do this with Javascript or CSS or something else?
Please don't scold me too much - I'm just learning:)
The solution I got now is very ugly - example codepen.io/Avelaskes/pen/rNOKVbQ
(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght#200;300;400;500;600;700&family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
background: #fff;
color: #333333;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
::selection {
color: white;
background: #C840E9;
}
::-webkit-selection {
color: white;
background: #C840E9;
}
::-moz-selection {
color: white;
background: #C840E9;
}
.scrolltotop {
width: 40px;
height: 40px;
border-radius: 20px 20px 0 0;
background: #5773FF;
text-align: center;
padding-top: 8px;
font-size: 22px;
color: #ffffff;
position: fixed;
right: 5px;
bottom: 5px;
display: none;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
}
.scrolltotop:hover {
background: #C840E9;
color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}
/*---- header-area start ----*/
.header-area {
background-color: #15161C;
padding: 25px 0;
}
.navbar {
padding: 0px;
}
.navbar-brand img {
max-width: 100%;
display: block;
transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
}
.navbar-brand img:hover {
opacity: 0.8;
}
.main-menu-part ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.main-menu-part ul li {
float: left;
}
.main-menu-part ul li a {
font-family: 'Cabin', sans-serif;
display: block;
padding: 0px 5px 0px 52px;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
color: #fff;
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
}
.main-menu-part ul li a:hover {
opacity: 0.8;
}
.hamburger {
padding: 10px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: 0px!important;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #13F1FC;
border-radius: 2px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*---- rkma-area start ----*/
.rkma-area {
background-color: #15161c;
}
.mnrkma_top {
background: url(img/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0;
padding-bottom: 545px;
}
.rkma_top h2 {
color: #fff;
font-size: 50px;
text-align: center;
font-weight: 600;
padding-top: 50px;
}
.rkma_top p {
font-family: 'Cabin', sans-serif;
color: #B7E6FF;
font-size: 16px;
text-align: center;
line-height: 25px;
padding-top: 5px;
}
.rkma_part {
position: relative;
-webkit-animation:animation-hci0jy 5s 2s infinite alternate;
animation:animation-hci0jy 5s 2s infinite alternate;
-webkit-animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part img {
width: 334px;
display: block;
margin: auto;
padding-top: 50px;
}
.rkma_part_1 {
position: absolute;
top: 0;
left: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part_2 {
position: absolute;
top: 0;
right: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
#-webkit-keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
#keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
/*---- smy-area start ----*/
.smy-area {
background-color: #15161C;
padding: 60px 0;
padding-top: 0;
}
.smy_top h2 {
color: #9F9F9F;
font-size: 52px;
font-weight: 700;
text-align: center;
}
.smy_top p {
color: #9F9F9F;
font-size: 27px;
font-weight: 700;
text-align: center;
padding-top: 5px;
padding-bottom: 30px;
}
.smy_left img {
max-width: 100%;
display: block;
}
.smy_left p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
font-size: 25px;
font-weight: 600;
padding-left: 103px;
line-height: 35px;
margin-top: -68px;
}
.smy_right img {
width: 180px;
height: 120px;
border-radius: 100%;
display: block;
margin: auto;
border: 4px solid #B9B8B8;
}
.smy_right p {
color: #F2F2F2;
font-size: 18px;
text-align: center;
line-height: 25px;
padding-top: 16px;
}
/*---- tabbingsec-area start---*/
.tabbingsec-area2 {
display: none;
}
.tabs {
width: 100%;
display: inline-block;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
padding-top: 110px
}
.tab-links li {
list-style: none;
padding-bottom: 19px;
}
.tab-links li i {
color: #C4C4C4;
font-size: 10px;
padding-right: 6px;
}
.tab-links a {
color: #E4E4E4;
font-size: 16px;
}
.tab-links a:hover {
text-decoration: none;
}
.tab-links li.active a {
color: #13F1FC;
}
/*----- Content of Tabs -----*/
.tab {
display: none;
}
.tab.active {
display: block;
}
#tabbingsec {
background: #15161C;
padding: 60px 0px;
}
.width60 {
width: 50%;
float: left;
}
.width60 h3 {
color: #9F9F9F;
font-size: 40px;
font-weight: 800;
padding-top: 60px;
padding-bottom: 6px;
}
.width60 p {
color: #AAABAB;
font-size: 28px;
line-height: 37px;
}
.width40 {
width: 50%;
float: left;
}
.width40 img {
max-width: 10%;
display: block;
margin: auto;
}
.width60 a {
width: 121px;
height: 46px;
line-height: 46px;
text-align: center;
color: #fff;
background:#ff8b38;
border-radius:3px;
font-size: 15px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tabbingsec">
<div class="container">
<div class="tabs">
<div class="row">
<div class="col-lg-8 col-md-9 col-sm-6">
<div class="tab-content">
<div id="tab1" class="tab active">
<div class="width60">
<h3>First of all</h3>
<p>Decide where you will <br>enter into a position <br>and where you want<br> to put a stop order</p>
</div>
<div class="width40">
<img src="img/ph4.png" alt=""/>
</div>
</div>
<div id="tab2" class="tab">
<div class="width60">
<h3>In App</h3>
<p>Choose the calculator<br> depending on what<br> market you are working<br> or choose Universal</p>
</div>
<div class="width40">
<img src="img/ph5.png" alt=""/>
</div>
</div>
<div id="tab3" class="tab">
<div class="width60">
<h3>Balance</h3>
<p>Enter the amount of<br> balance or the amount<br> of money from which <br>you will count risk</p>
</div>
<div class="width40">
<img src="img/ph6.png" alt=""/>
</div>
</div>
<div id="tab4" class="tab">
<div class="width60">
<h3>Required</h3>
<p>Enter the price at wich<br> you plan to enter into <br>position and the price <br>of the planed stop order</p>
</div>
<div class="width40">
<img src="img/ph7.png" alt=""/>
</div>
</div>
<div id="tab5" class="tab">
<div class="width60">
<h3>Be WISE</h3>
<p>Chose the aceptable<br> risk amount in %.<br> The amount that you<br> are ready to loose in<br> case you wrong in your<br> predicrion</p>
</div>
<div class="width40">
<img src="img/ph8.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6">
<ul class="tab-links">
<li class="active"><i class="fas fa-circle" aria-hidden="true"></i>First step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Second step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Third step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fourth step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fivth step</li>
</ul>
</div>
</div>
</div>
</div>
</section>

HTML/CSS: Add Icon to Text Button

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>

You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>

.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>

---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>

Fullscreen overlay opens on page load

I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>