Develop Reference

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

My slide navigation menu does not hide the content that it was sliding over

I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!

all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}

How to set underline on hover on navigation links on responsive menu?

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>

Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

Automatically animated css javascript underline

Need make CSS (Javascript) underline like this (Some Example from codepen)
#import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
background: #004050;
font-family: Quando;
font-weight: 300;
width: 100%;
}
h2, h3 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}
h2 > a, h3 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.uno a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #ffdb00;
}
.dos > a:after {
content: "";
position: absolute;
width: 100%;
height: 7px;
border: 1px solid #000;
bottom: -2px;
left: 0;
background: #fff;
border-radius: 5px;
opacity: 0;
transform: scalex(0);
transition: .5s;
}
.dos.bis > a:after {
opacity: .05;
transform: scalex(1);
}
.dos:hover > a:after {
opacity: .15;
transform: scalex(1);
}
.dos.bis > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FF5E33;
}
h3 > a:before {
content: "";
background: #7FDBFF;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
border-radius: 5px;
transform: scaleX(0);
animation: 1.4s forwards no-hover-v linear;
animation-fill-mode: forwards;
z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
animation: .5s forwards hover-v linear;
animation-fill-mode: forwards;
}
#keyframes hover-v {
0% {
transform: scaleX(0);
height: 5px;
}
45% {
transform: scaleX(1.05);
height: 5px;
}
55% {height: 5px;}
100% {
transform: scaleX(1.05);
height: 3.8rem;
}
}
#keyframes no-hover-v {
0% {
transform: scaleX(1.05);
height: 3.8rem;
}
45% {height: 5px;}
55% {
transform: scaleX(1.05);
height: 5px;
opacity: 1;
}
100% {
transform: scaleX(0);
height: 5px;
opacity: .02;
}
}
p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
<h2>
<a href=''>:hover, please</a>
</h2>
But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.
An when link have mouse hover the underline must be simultaneously grow to right.
Please code how to do this.

Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.
var a = document.getElementById("a");
setTimeout(function() {
a.classList.add("under");
setTimeout(function() {
a.classList.remove("under");
}, 2000);
}, 500);
h2 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
h2 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
position: relative;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
transform-origin: 0 0;
}
h2 > a.under:before {
visibility: visible;
transform: scaleX(1);
}
<h2>
<a id="a" href=''>:hover, please</a>
</h2>

jQuery animation doesn't work the second time

Why in THIS CODE if you press the "I" button on the bottom right the first time works, but the second it shows just the pink background?
(function(){
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});
$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
background: url("http://species-in-pieces.com/img/bg/grad-bg.png") no-repeat center center/cover #F9D8AD;
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 20px;
}
.fa-info {
color: white;
}
#container {
width: 330px;
height: 508px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
right: 20px;
bottom: 20px;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #ff2670;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
border: 1px solid #ff2670;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
#-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #ff2670;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
-webkit-transform: rotate(90deg) translateY(-96px);
-ms-transform: rotate(90deg) translateY(-96px);
transform: rotate(90deg) translateY(-96px);
right: 0;
bottom: 0;
-webkit-transition: .3s all ease .6s;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: white;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}
.copyright {
position: fixed;
right: 15px;
bottom: 15px;
font-family: "Roboto";
}
.copyright span {
line-height: 36px;
color: rgba(255, 255, 255, 0.75);
margin-right: 10px;
font-weight: 300;
}
.copyright span a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
.copyright .balapa {
width: 30px;
height: 30px;
display: block;
background: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-80_3.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.75);
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="container">
<h2>Material Overlay Animation</h2>
<div class="img-wrapper">
<img src="https://d13yacurqjgara.cloudfront.net/users/2733/screenshots/741958/dribbble-foxes.jpg" alt="Just Background">
</div>
<p class="detail">Click the Button to see the "Material Animation". Works great on modern browser.</p>
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-info">
<div class="ripple"></div>
</button>
</div>
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
<img src="https://d13yacurqjgara.cloudfront.net/users/332135/avatars/normal/52d614ee44e3e21d2b73894c465773d7.png" alt="Balapa">
<p>Crafted by balapa.</p>
<p>See also my other pen</p>
</div>
</div>
</main>
<div class="copyright"><span>Material Overlay Animation by</span></div>

You have to clear the queue using clearQueue() function.
Change your code to this
...
$buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
$layer.addClass("active");
});
});
...
Or you can even do it like this which is a way suggested in jQuery documentation.
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
jQuery.dequeue( this );
});
});
Important part directly from jQuery documentation,
Note that when adding a function with jQuery.queue(), we should ensure
that jQuery.dequeue() is eventually called so that the next function
in line executes.

Instead of this:
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
Use this:
$buttonWrapper.addClass("clicked");
setTimeout(function(){$layer.addClass("active")},1500);
And it will work.