CSS3 Transition on pseudo element (::before) does not work - javascript

I am trying to style a border with a pseudo element. I have a div and this div has a top border. I want the border to have a little arrow when I hover over the div. I have been able to achieve this, but What I want is for the little arrow to SLIDE DOWN SLOWLY when I hover over the div. I have tried to add some transitions but the transitions seem not to work on the ::before elements. I've looked at all the questions on Stackoverflow asking a similar thing, but none of the solutions seem to be able to solve my problem
Here's the code.
HTML
<div class="flexContainer">
<div class="flexContainerBox flexContainerBox1">
<div class="flexContainerBoxBorderRight"></div>
</div>
<div class="flexContainerBox flexContainerBox2">
<div class="flexContainerBoxBorderRight"></div>
</div>
<div class="flexContainerBox flexContainerBox3">
<div class="flexContainerBoxBorderRight"></div>
</div>
<div class="flexContainerBox flexContainerBox4">
<div class="flexContainerBoxBorderRight"></div>
</div>
<div class="clear"></div>
</div>
and the CSS
.flexContainer {
display: flex;
flex-direction: row;
}
.flexContainerBox {
flex: 1;
border-top: 20px solid transparent;
position: relative;
padding: 50px;
font-family: "Open Sans Bold";
}
.flexContainerBoxBorderRight {
border-right: 1px solid #ccc;
position: absolute;
top: 10%;
bottom: 10%;
right: 0;
}
.flexContainerBox1 {
border-top-color: #15AF04;
color: #15AF04
}
.flexContainerBox2 {
border-top-color:#ffd470;
color: #ffd470;
}
.flexContainerBox3 {
border-top-color: #1b63b1;
color: #1b63b1;
}
.flexContainerBox4 {
border-top-color: #dd0000;
color: #dd0000;
}
.flexContainerBox::before{
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.flexContainerBox:hover::before {
content: '';
position: absolute;
border: 15px solid transparent;
border-bottom: 0;
position: absolute;
left: 50%;
top: 0;
-moz-transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 0%);
}
.flexContainerBox1:hover::before {
border-top-color: #15AF04;
}
.flexContainerBox2:hover::before {
border-top-color: #ffd470;
}
.flexContainerBox3:hover::before {
border-top-color: #1b63b1;
}
.flexContainerBox4:hover::before {
border-top-color: #dd0000;
}
Any solution, even a JQUERY or Pure JS solution will be appreciated.


The problem is that the pseudo-element doesn't exist when the container isn't being hovered:
.flexContainerBox:hover::before {
content: '';
position: absolute;
border: 15px solid transparent;
border-bottom: 0;
position: absolute;
left: 50%;
top: 0;
-moz-transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 0%);
}
You should move some of these styles to the .flexContainerBox::before styles (where you have the transition styles):
.flexContainerBox::before {
content: '';
position: absolute;
border: 15px solid transparent;
border-bottom: 0;
position: absolute;
left: 50%;
top: 0;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
To not animate the centering of the arrow (translate(-50%, ...)), you can add this:
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
Also, there's a small typo:
transform: translate(-50%, 0%);
becomes
transform: translate(-50%, 100%);
Result
.flexContainer {
display: flex;
flex-direction: row;
}
.flexContainerBox {
flex: 1;
border-top: 20px solid transparent;
position: relative;
padding: 50px;
font-family: "Open Sans Bold";
}
.flexContainerBoxBorderRight {
border-right: 1px solid #ccc;
position: absolute;
top: 10%;
bottom: 10%;
right: 0;
}
.flexContainerBox1 {
border-top-color: #15AF04;
color: #15AF04
}
.flexContainerBox2 {
border-top-color: #ffd470;
color: #ffd470;
}
.flexContainerBox3 {
border-top-color: #1b63b1;
color: #1b63b1;
}
.flexContainerBox4 {
border-top-color: #dd0000;
color: #dd0000;
}
.flexContainerBox::before {
content: '';
position: absolute;
border: 15px solid transparent;
border-bottom: 0;
position: absolute;
left: 50%;
top: 0;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.flexContainerBox:hover::before {
-moz-transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
}
.flexContainerBox1:hover::before {
border-top-color: #15AF04;
}
.flexContainerBox2:hover::before {
border-top-color: #ffd470;
}
.flexContainerBox3:hover::before {
border-top-color: #1b63b1;
}
.flexContainerBox4:hover::before {
border-top-color: #dd0000;
}
<div class="indexContainer whiteContainer flexContainer">
<div class="flexContainerBox flexContainerBox1">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
WORLD CLASS <span style="color:#111">FACILITIES</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Day & Boarding</li>
<li>Secondary & Primary</li>
<li>Ages 2 to 18</li>
<li>200 Students </li>
<li>Cambridge IGCSE & GCEs</li>
<li>Beautiful sports facilities</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox2">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
QUALITY <span style="color:#111">EDUCATION</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Over 10 Years Experience in Quality delivery</li>
<li>Good resources for Students</li>
<li>Student Oriented Learning</li>
<li>Good Teaching staff </li>
<li>Conducive Environment</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox3">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
PERSONAL <span style="color:#111">TOUCH</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Small Class Sizes</li>
<li>Low teacher:student Ratio</li>
<li>Maximum contact with teachers</li>
<li>Mentorship programs</li>
<li>Student Counselling</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox4">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
HOLISTIC <span style="color:#111">APPROACH</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Innovative Teaching Methods</li>
<li>Use of Technology in learning</li>
<li>Developing the "whole" child</li>
<li>Nurturing Talents & Gifts</li>
<li>Extra-curricular program</li>
<li>Christ-Centered School</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>


Remove hover from this css .flexContainerBox:hover::before => .flexContainerBox::before, and animation should work.

Related

Why preloader is showing header section

I am currently working on a website cloning project in order to practice HTML5 and become a better front end developer, so I created a preload animation using CSS. It works fine, but the header section, which includes the navigation and logo, is not hidden. How can I fix this? Is there anything wrong with my code?
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 999;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

The easiest fix would be to add some css to hide the navbar until the .pageloaded class is added to the body.
.navbar {
visibility: hidden;
}
.pageloaded .navbar {
visibility: visible;
}

Before answering to the question "why the header is showing", let's see why the rest of the body is not showing for the first 300ms.
It is because there is a element .spinner. Its width and height take up 100% of the page. Its position is set to fixed means the element is fixed at top 0 and left 0 (the upper-left corner) according to the CSS. More importantly is fixed position element break the normal document flow. Normally element are rendered top-to-bottom, left-to-right. .spinner being removed from document flow means the spinner was taken out and stick to the top left. Therefore the .spinner with 100% size take up the whole screen and showing the spinning bubble. There is another effect, the place originally occupied for .spinner will be remove and the main body it will be brought up. That means .spinner and the main body is not displayed one after one, but they are stacked together. .spinner being on top and cover the rest is because it has a z-index applied to it, which the value is 999.
Now back to the question, why header is showing. Because of bootstrap, .fixed-top has z-index: 1030, which greater than .spinner's 999. That's why it is on top of the spinner.
The solution you need is, to set the .spinner z-index any value greater than bootstrap's default.
.section-spinner {
/* ... */
z-index: 1050;
}
Example below.
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 1050;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?
This is the fiddle :
https://jsfiddle.net/2s6w4hq7/
This is my HTML :
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
and this is the CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
#-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
#keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}

You need to use different id for each button and match the <label>'s for attribute to that same id:
For example:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.
ie.
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
change your code with above code.

You just need to define different ID's for Checkbox and label under div of class share-button.
Please refer below code:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>

Transition effect not working when added display attribute

Requirement is to put transition effect on redeem now button. Initially redeem now button is hidden, on hover it will display the redeem now button with transition
Problem is I have added display: none for redeem now button and on hover its showing display: block.
Below is my code
.wpf-demo-3 {
background-color: #FFF;
display: block;
width: 265px;
height: 300px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align: center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
display: block !important;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
display: none !important;
}
<div class="col-xs-12 col-sm-3 col-md-3 text-center item-spacing" style=" margin: 0px; padding: 0px;" >
<div class="item hot-deals-wrapper clearfix item-spacingies " style="height: 300px;">
<div class="wpf-demo-3">
<h5> <strong><a style="color:#000;text-decoration:none" data-bind="text:name,attr:{href:redirectLink}"></a></strong> </h5>
<div data-bind="ifnot: mediumImage">
<div class="img-wrapper"> <a data-bind="attr:{href:redirectLink}"><img src="https://d2kbtrec8muwrn.cloudfront.net/assets/web/fnp/fnp/basket/B28.jpg"/></a> </div>
</div>
<div> <i class="fa fa-share-alt share-icon socialicons"></i>
<div style="display:none" class="alert_list"> </div>
</div>
<a href = "https://www.google.co.in/" class = "view-caption">
<button class="btn btn-default pb-bg-red bottommarginmore redeemNowBtn " style=" width: 128px; margin-top: 25px;">Redeem Now</button>
</a> </div>
</div>
</div>

You can try this instead of dispaly property
CSS CODE:
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align:center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
opacity: 1;
visibility: visible;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
opacity: 0;
visibility: hidden;
}
DEMO:
https://jsfiddle.net/JentiDabhi/k5c6net2/

When switching from a display:none to a display:block with CSS transitions, try using a Javascript setTimeout with a small delay as an intermediary. The transitions can't apply to a display:none situation.
To do this you'd need to use a hover event, rather than a hover CSS selector.
In CSS, try changing .wpf-demo-3:hover .view-caption to just .view-caption.transition. Also, remove the display: block; and display:block !important; declarations.
Also, remove the display: none !important; from the .wpf-demo-3 .view-caption declaration.
Then in Javascript try something like (using jQuery syntax for example simplicity):
$('.wpf-demo-3').hover(function(){
$('.view-caption').show();
setTimeout(function(){
$('.view-caption').addClass('transition');
}, 10);
}, function(){
$('.view-caption').removeClass('transition');
setTimeout(function(){
$('.view-caption').hide();
}, 510);
});
The setTimeout in the last hover function is set to 510ms so that it is 10ms after the CSS transition timing of 0.5s.

How to scale a div on clicking a button

Code:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
});
});
.ham-layer {
height: 50px;
width: 50px;
background: #fff;
margin: 0px;
top: 0;
left: 0;
position: fixed;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0;
}
#nav-icon {
position: fixed;
left: 35px;
top: 0px;
width: 32px;
height: 20px;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span {
background: #111111;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 1px;
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 2px;
}
#nav-icon.open .ham-layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
opacity: 1;
}
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="ham-layer"></div>
<!-- <i class="fa fa-bars hamburger"></i> -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<p id="_intro" class="text-center"></p>
<hr width=40%>
<p id="belowIntro" class="text-center"></p>
</div>
</div>
</div>
</section>
I wanted to make it so that when the hamburger icon is clicked, the layer scales itself up thus showing the menu. But the scaling part is not happening. What should I do so that this happens? Right now the hamburger icon is animating but the circular div isn't expanding.

It is because your .ham-layer is not inside of your #nav-icon. Your last CSS selector #nav-icon.open .ham-layer implies that .ham-layer is somewhere inside of your #nav-icon div.

Getting image to display after hiding it

I am working on a slideout nav screen. I got the horizontal slide out menu to work perfectly without media queries, but when I tried to add my slide out navigation menu to my normal navigation menu, I cannot get the three line hamburger menu image to display when in a media screen on max-width: 640px;. I hide the nav-btn (menu image) when the normal navigation menu is displaying, but I want the nav-btn to display when I get to the smaller screen size to allow me to open the menu.
Does anyone see why my nav-btn will not display within my media query?
//open the lateral panel
$('.nav-btn').on('click', function(event){
event.preventDefault();
$('.nav-panel').addClass('is-visible');
});
//clode the lateral panel
$('.nav-panel').on('click', function(event){
if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) {
$('.nav-panel').removeClass('is-visible');
event.preventDefault();
}
});
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: inline-block;
padding: 25px 15px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
display: none;
}*/
#media screen and (max-width:640px) {
.header {
display: none;
}
.nav-panel {
display: block;
}
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: block;
padding: 15px 15px;
text-decoration: none;
/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
position: absolute;
display: block;
right: 2%;
top: 3%;
}
.nav-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 1s;
-moz-transition: visibility 1s;
transition: visibility 1s;
}
.nav-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
-webkit-transition: background 0.8s 0.8s;
-moz-transition: background 0.8s 0.8s;
transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.nav-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.nav-panel.is-visible .nav-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.nav-panel.is-visible .nav-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.nav-panel-header {
position: fixed;
width: 70%;
height: 50px;
line-height: 50px;
background: rgba(255, 255, 255, 0.96);
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
#nav-slide-title {
font-weight: bold;
color: #45a5ba;
padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
top: -50px;
}
.from-right .nav-panel-header {
right: 0;
}
.from-left .nav-panel-header {
left: 0;
}
.is-visible .nav-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<div class="logo">Optimum Designs</div>
<nav>
<img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;">
<!-- <span class="nav-btn"></span> -->
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main class="cd-main-content">
<h1>Slide In Panel</h1>
</main>
<div class="nav-panel from-right">
<header class="nav-panel-header">
<div id="nav-slide-title">Menu</div>
Close
</header>
<div class="nav-panel-container">
<div class="nav-panel-content">
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div> <!-- nav-panel-content -->
</div> <!-- nav-panel-container -->
</div> <!-- nav-panel -->

I figured it out. I had the nav-btn within my header div. I was doing this .header {display: none;} which was not allowing my button to show within my media query.
For those that looked, thanks.

Categories