Fade in when scroll down and fade out when scroll up - javascript

This is the css code of the fade in animation
.searchbar {
opacity: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
I want that a searchbar fades in when I scroll down (after 700px) and when I scroll up (so its less than 700px) it fades out
this is the script in js
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 700) {
$(".searchbar").addClass("animated_fi fadeIn");
} else {
$(".searchbar").removeClass("animated_fi fadeIn");
}
});


If I'm understanding your query correctly. You're after something like this:
$(window).scroll(function(e) {
if ($(this).scrollTop() > 300) { // choose the value you want.
$('#menu:hidden').slideDown();
} else {
$('#menu:visible').slideUp();
}
});
body {
height: 2000px;
margin: 0;
background-color: black;
}
#menu {
background: white;
color: black;
padding: 1em;
width: 100%;
display: none;
position: fixed;
top: 0;
}
h1 {
font-family: 'Lato', sans-serif;
}
.search-container {
width: 490px;
display: block;
margin: 0 auto;
}
input#search-bar {
margin: 0 auto;
width: 100%;
height: 45px;
padding: 0 20px;
font-size: 1rem;
border: 1px solid #d0cfce;
outline: none;
}
input#search-bar:focus {
border: 1px solid #008abf;
transition: 0.35s ease;
color: #008abf;
}
input#search-bar:focus::-webkit-input-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
input#search-bar:focus::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
input#search-bar:focus:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
.search-icon {
position: relative;
float: right;
width: 75px;
height: 75px;
top: -62px;
right: -45px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="menu">
<center>
<h1>Hello</h1>
</center>
<form class="search-container">
<input type="text" id="search-bar" placeholder="What can I help you with today?">
<img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png">
</form>
</div>
<center>
<div>
<h1 style="color: white;">Scroll Down</h1>
</div>
</center>
</body>
This will fade a search bar in when the user scrolls, and then fade out when they scroll back. If you want the effect to take place at 700px just change the JQuery 300 -> 700.

Related

Keyframe animate absolute positioned buttons

I have one large button at z-index: 1, covering up two smaller buttons at z-indices 0.9 and 0.8, respectively. On click of the first button, they should slide out. This only occurs when they do not have the "position: absolute;" property, however this causes them to be placed lower on the screen, rather than beneath the element that's meant to be covering them.
Link to CodePen
https://codepen.io/Gladdstone/pen/aYObGy
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
margin-left: 75%;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
}
#celsius {
z-index: 0.8;
}
#fahrenheit {
z-index: 0.9;
}
#temp {
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
}
#tempbutton {
bottom: 10%;
width: 100%;
}
#keyframes celsius-out {
from { margin-left: 75%; }
to { margin-left: 30%; }
}
#keyframes celsius-in {
from { margin-left: 30%; }
to { margin-left: 75%; }
}
#keyframes fahrenheit-out {
from { margin-left: 75%; }
to { margin-left: 50%; }
}
#keyframes fahrenheit-in {
from { margin-left: 50%; }
to { margin-left: 75%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>

Is this you want ??
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
#charset "utf-8";
/* CSS Document */
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
right: 60px;
top: 45px;
}
#temp {
position: relative;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
z-index: 5;
}
#tempbutton {
bottom: 10%;
width: 100%;
position: relative;
}
#keyframes celsius-out {
from { right: 40px; }
to { right: 50%; }
}
#keyframes celsius-in {
from { right: 50%; }
to { right: 40px; }
}
#keyframes fahrenheit-out {
from { right: 40px; }
to { right: 70%; }
}
#keyframes fahrenheit-in {
from { right: 70%; }
to {right: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>

How to do reverse animation in CSS?

So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.

Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

Text Underline Animation Left to Right

The Navigation Links on hover ease in a underline from left to right and ease out right to left. I would like to make it so that both the ease in & ease out go from left to right. How can I adjust the ease out?
http://jsfiddle.net/2tycjc82/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
#navpromo ul {
margin: 0;
}
.want{
display: inline-block;
text-align: center;
float: left;
padding-right:10px;
margin-bottom: 0;
}
.check{
text-align: center;
display:inline-block;
}
#media only screen and (max-width: 555px) {
.want{
display: block;
text-align: center;
float: none;
padding-right: 0px;
margin-bottom: 0;
}
.check{
text-align: center;
display: block;
}
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});

Make some changes to your css:
.navlist:after {
...
float: right; /* Add this line */
}
.navlist:hover:after {
...
float: left; /* Add this line */
}
Demo: http://jsfiddle.net/2tycjc82/2/
But as I commented. There's a not-so-nice result when user hover in then immediately hover out.

underline incorrect width

The Navigation Links have an animated underline which in screen size <555px shows as being 100% page width when they should only be showing the width of the text. Changing the display to inline-block changes the width but I want the links to display on top of each other not side by side?
http://jsfiddle.net/2tycjc82/
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
#navpromo ul {
margin: 0;
}
.want{
display: inline-block;
text-align: center;
float: left;
padding-right:10px;
margin-bottom: 0;
}
.check{
text-align: center;
display:inline-block;
}
#media only screen and (max-width: 555px) {
.want{
display: block;
text-align: center;
float: none;
padding-right: 0px;
margin-bottom: 0;
}
.check{
text-align: center;
display: block;
}
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>

You can move the animation to the a tags and then use the .navlist items to separate each onto its own line:
Take the style attributes off the links and define that in CSS, without the width definition.
.navlist a {
display: inline-block;
}
Take the animation off of .navlist and put it on the a inside it:
.navlist a:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist a:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
Make the .navlist items block so that each link appears on its own line:
.navlist {
display: block;
}
http://jsfiddle.net/2tycjc82/6/

Add width to ul and center it, and remove display: block from li:
http://jsfiddle.net/2tycjc82/7/

Change nav bar background color when menu is toggled jQuery

I am trying to make the nav bar when at the top of the page prior to any scrolling allow a change of the background color from transparent to white when the navigation menu is toggled. I have tried adding class .whitenavbar and jQuery to accompany (/navbar toggle color/) but it doesn't work and now prevents the menu from toggling at all?
Any help is appreciated!
https://jsfiddle.net/43taovan/
CSS:
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
.whitenavbar {
background: #fff;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
border-top: 0.5px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
padding: 30px;
}
}
/*----/----Landscape*/
jQuery
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navbar toggle color*/
$("#toggle-menu").click(function (e) {
$(".nav").addClass(".whitenavbar");
$('.nav').addClass('navfade');
}
else {
$('.nav').removeClass(".whitenavbar");
}
});
/*----/----navbar toggle color*/
/*Jump Scroll*/
$(function () {
var $window = $(window),
$document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string",
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function (e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function (e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
$("#container").hide();
$("#button").on('click', function() {
if($("#button").val() == 'thank you')
return false;
if($("#container").is(":visible"))
return false;
$("#container").toggle();
this.value = this.value == 'send me a message' ? 'contact' : 'send me a message';
});
$("#button2").on('click', function(e) {
$("#container").toggle();
$("#button").val('thank you');
});
/*----/-----contact let me know toggle*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6- 12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h- 21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2- 11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8- 0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v- 1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7- 3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3- 3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>

Try the following define your whitenavbar css after the the css you have already defined for the element.It is working for header. If you want to apply to other element then change accordingly. if you change .nav background it would not be visible. Next option is to change .navigation
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar");
}else{
$("div.header").removeClass("whitenavbar");
}
});
css notice it is after .header{} css
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: teal;
}

I'm not sure but I think maybe the reason it isn't toggling is because of the else statement because it looks like when it's clicked you're adding those classes, and if it's not clicked you're removing them, but if it isn't clicked you aren't adding them in the first place (if that makes sense), and maybe this could be why it isn't toggling.
I'm getting an error when I try to run the JSFiddle (I could just be clicking the wrong thing) but if you want the nav bar to turn white when it's clicked you could just change the CSS, and because changing the CSS is a simpler solution it might have less of a chance of causing a problem with the toggle in the first place.
$(".nav").css("background", "white");

Categories