How to achieve smoothe slide down effect in Navbar Menu - javascript

Objective - I wanted to achieve a slide down (for navbar) effect after some scrolling. I actually achieved what I wanted, but I am getting a problem.
Problem - When scrolling up to the top, the navbar is getting sticky with no effect and it is kind of takes the charm. Can anyone help me to fix this?
You can see my code here at Codepen.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#header').addClass('sticky-header');
$('#header .mo-row').removeClass('sticky-border');
} else {
$('#header').removeClass('sticky-header');
$('#header .mo-row').addClass('sticky-border');
}
});
var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebarBox.classList.remove('active');
} else {
this.classList.add('active');
sidebarBox.classList.add('active');
}
});
// accordion js
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active2');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active2')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active2');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
html {
box-sizing: border-box;
}
body {
margin: 0;
height: 1000px;
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
.mo-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 999;
position: relative;
}
.mo-row {
width: 95%;
margin: 0 auto;
}
.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
content: " ";
display: table;
}
.mo-grid:after,
.mo-row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 10px;
}
#media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
#media screen and (min-width: 992px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
.hello-bar {
height: 40px;
line-height: 39px;
background: #52ae56;
text-align: center;
color: #fff;
}
.hello-bar a {
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.hello-bar a span {
font-weight: bold;
}
.sticky-header {
background-color: #fff !important;
box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
height: 65px;
line-height: 65px;
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slidedown {
0% {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slidedown {
0% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.sticky-border {
border-bottom: 1px solid #e8e8e8;
}
#header-sec {
position: relative;
z-index: 9999999;
height: 65px;
line-height: 65px;
/* Fold Out */
/* accordion css */
}
#header-sec #header {
background-color: transparent;
width: 100%;
height: 66px;
line-height: 64px;
position: absolute;
}
#header-sec #header .navbar-logo {
height: 65px;
line-height: 65px;
cursor: pointer;
}
#header-sec #header .navbar-logo img {
height: 75px;
margin-top: -4px;
margin-left: -17px;
}
#header-sec .nav ul {
background-color: transparent;
}
#header-sec .nav ul > li {
display: inline-block;
position: relative;
}
#header-sec .nav a {
display: block;
padding: 10px 18px 10px 15px;
font-size: 0.9em;
line-height: 1.2em;
color: #0d1739;
font-weight: 400;
}
#header-sec .nav a:hover {
text-decoration: none;
}
#header-sec .nav li ul {
background-color: #fff;
}
#header-sec .nav li ul li {
width: 200px;
display: block;
text-align: left;
}
#header-sec .nav li ul a {
border: none;
color: #333;
}
#header-sec .nav li ul a:hover {
background: #333;
color: #fff;
}
#header-sec .nav li ul {
position: absolute;
left: 0;
top: 52px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
background: #fff;
padding: 10px 30px;
border-bottom: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
border-bottom: none;
}
#header-sec a {
color: #343838;
}
#header-sec #box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
right: -250px;
width: 250px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #box.active {
right: 0px;
opacity: 1;
}
#header-sec #items {
position: relative;
top: 8.7%;
line-height: normal;
}
#header-sec #items .item {
position: relative;
cursor: pointer;
font-size: 1em;
/* originally 2ems */
padding: 10px 20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#header-sec #items .item:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec #btn {
position: absolute;
z-index: 5;
top: 22px;
right: 9px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #btn div {
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: #1d1f20;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-sec #btn.active {
right: 9px;
}
#header-sec #btn.active div {
background-color: #343838;
}
#header-sec #btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#header-sec #btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#header-sec #btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
overflow: hidden;
line-height: normal;
}
#header-sec .accordion-section-title {
cursor: pointer;
width: 100%;
transition: all linear 0.15s;
-webkit-transition: all linear 0.15s;
-moz-transition: all linear 0.15s;
-ms-transition: all linear 0.15s;
-o-transition: all linear 0.15s;
position: relative;
display: block;
padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
display: none;
background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
display: block;
}
#header-sec #box, #header-sec #btn {
display: none;
}
#media screen and (max-width: 992px) {
#header-sec .navbar-menu {
display: none;
}
#header-sec #box, #header-sec #btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
<img src="img/notification.png" alt="" style="width: 17px;"></a>
</div>
</div>
</div>
</div>
<section id="header-sec">
<header id="header">
<div class="mo-container">
<div class="mo-row sticky-border">
<nav class="col-sm-6 col-md-4 col-lg-2">
<div class="navbar-logo">
<img src="img/logo-dark.png" alt="">
</div>
</nav>
<nav class="col-sm-6 col-md-8 col-lg-10 text-right">
<div class="navbar-menu nav">
<ul>
<li>
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</li>
<li>
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Customer Stories</li>
<li>Help & Support</li>
<li>Developers Docs</li>
</ul>
</li>
<li>
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</li>
<li>Pricing</li>
<li>Login</li>
<li>Sign Up</li>
<li>
<a href="" style="padding-right: 0;">
<button class="button primary">Free Demo</button>
</a>
</li>
</ul>
</div>
<div id="box">
<div id="items">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-2" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-3" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="item">Pricing</div>
<div class="item">Login</div>
<div class="item">Sign Up</div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</nav>
</div>
</div>
</header>
</section>


So I changed your sticky header JS to add a class on scroll up and a class of show once 200px had been scrolled from the top.
JS
// Sticky Header
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 200) {
jQuery("#header").addClass("show");
} else {
jQuery("#header").removeClass("show");
}
});
var lastScrollTop = 0;
jQuery(window).scroll(function(event){
var st = jQuery(this).scrollTop();
if (st > lastScrollTop){
jQuery("#header").removeClass("up");
} else {
jQuery("#header").addClass("up");
}
lastScrollTop = st;
});
Then Added the CSS
#header-sec #header,
#header-sec #header.up{
position: absolute;
top: 0;
-webkit-transition: top 500ms ease-out ;
-moz-transition: top 500ms ease-out ;
-o-transition: top 500ms ease-out ;
transition: top 500ms ease-out ;
}
#header-sec #header.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#header-sec #header.up.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slideup;
animation-name: slideup;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
}
#keyframes slideup {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
}
Hope you can use this

Related

transition between expanding elements

I have another question.
I hope it does not count as dumb question again. most beginner questions seem to been seen as dumb.
Anyway I am trying to have the transition between clicking cards more smooth.
Currently you can click on a card and it expands down and it is smooth when you click on the same card, but if you click on one card then a diferent one it is not smoth expanding the elements.
Mostly when the cards are next to each other in full screen
var $cell = $(".card");
//open and close card when clicked on card
$cell.find(".js-expander").click(function (e) {
e.stopImmediatePropagation();
var $thisCell = $(this).closest(".card");
if ($thisCell.hasClass("is-collapsed")) {
$cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed");
//$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
// if ($cell.not($thisCell).hasClass("is-inactive")) {
// //do nothing
// } else {
// //$cell.not($thisCell).addClass('is-inactive');
// }
} else {
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
}
});
$cell.find(".card__expander").click(function (e) {
e.stopImmediatePropagation();
});
//close card when click on cross
$cell.find(".js-collapser").click(function () {
var $thisCell = $(this).closest(".card");
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
});
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
#media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "\f115";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
-webkit-transform: scale(1);
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
-webkit-transform: scale(1);
transform: scale(1);
}
#media screen and (min-width: 992px) {
.card:nth-of-type(3n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n + 3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n + 4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n + 3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
}
a {
color: #35a785;
text-decoration: none;
}
/* --------------------------------
--------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background-color: #5e6e8d;
color: #fff;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
/*
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index: 1;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border-radius: 0.25em 0.25em 0.4em 0.4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translatex(-400px);
-moz-transform: translatex(-400px);
-ms-transform: translatex(-400px);
-o-transform: translatex(-400px);
transform: translatex(-400px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.cd-popup-container p {
padding: 0px;
margin: 0px;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
content: "";
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrappeer">
<div class="cards">
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 1
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 2
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 3
</div>
</div>
</div>
</div>

A little timeout value will help.
First I check to see if there are any expanded and set a timeout MS number:
let timeout = $('.is-expanded').length > 0 ? 200 : 0
If there is something expanded, the timeout will be 200 miliseconds.
Then we set the expanding element in a timeout, which will be zero if there is nothing currently expanded:
setTimeout(() => {
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
}, timeout)
You can adjust the timeout value
var $cell = $(".card");
//open and close card when clicked on card
$cell.find(".js-expander").click(function(e) {
e.stopImmediatePropagation();
var $thisCell = $(this).closest(".card");
if ($thisCell.hasClass("is-collapsed")) {
let timeout = $('.is-expanded').length > 0 ? 200 : 0
$cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed");
//$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
setTimeout(() => {
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
}, timeout)
// if ($cell.not($thisCell).hasClass("is-inactive")) {
// //do nothing
// } else {
// //$cell.not($thisCell).addClass('is-inactive');
// }
} else {
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
}
});
$cell.find(".card__expander").click(function(e) {
e.stopImmediatePropagation();
});
//close card when click on cross
$cell.find(".js-collapser").click(function() {
var $thisCell = $(this).closest(".card");
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
});
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
#media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "\f115";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
-webkit-transform: scale(1);
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
-webkit-transform: scale(1);
transform: scale(1);
}
#media screen and (min-width: 992px) {
.card:nth-of-type(3n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n + 3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n + 4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n + 3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
}
a {
color: #35a785;
text-decoration: none;
}
/* --------------------------------
--------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background-color: #5e6e8d;
color: #fff;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
/*
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index: 1;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border-radius: 0.25em 0.25em 0.4em 0.4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translatex(-400px);
-moz-transform: translatex(-400px);
-ms-transform: translatex(-400px);
-o-transform: translatex(-400px);
transform: translatex(-400px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.cd-popup-container p {
padding: 0px;
margin: 0px;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
content: "";
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrappeer">
<div class="cards">
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 1
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 2
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 3
</div>
</div>
</div>
</div>

Delay transition effects until after nav closes

When I close my responsive nav menu the text changes font-size before it closes and I would like to have it slide in before the font-size changes. It is constructed as such;
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>
Styled like this;
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
and animated through this code;
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if ( e.keyCode === 27 ) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
}
})
();
I am new to this and am not even sure how to phrase the search to find this answer. Thanks for any help!

Dropdown fixed position and formatting not working

I have a responsive menu bar that has a dropdown list which is named three. However, I cannot make its format same with the other title and it moves once it is being hovered. Is there any way that the format title of three be the same as one, two, four and five? And when it is being hovered, is it possible that its position be in a fixed place? Please help. I already tried inline but it doesn't work either. And kindly run the snippet in full screen.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
#media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
#media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
#media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
#keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
p {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
p:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="one()">one</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">two</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<p class="strip__title" style="margin-left:-15px">three</p>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="sdct()">two</a>
<a class="dropdown-item" onclick="four()">four</a>
</div>
</li>
</ul>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">four</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="">five</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>

.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* add a width */
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: absolute; /*position is changes (relative --> absolute)*/
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

Drop down menu is not positioning correcting and on hover text moves

I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Bootstrap 4 nav collapsing animation stopping for a split second when opening, ok closing

When you expand the menu it slides down, stops for a split second and the continues. Sliding back up seems to be fine though but not as smooth when opening.
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
width: 50%;
margin: 0 auto;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

I saw a lot of unnecessary absolute positioning, both to have items fill the screen and be centered in other elements. This was preventing Bootstrap's toggle JS from properly recognizing what the height of the expanding element should be.
Instead of having the .navbar-collapse absolute positioned to always take up your window, the content inside of it should be the height of your window - I used height: 100vh on .navbar-nav to do this.
Additionally, since .navbar-nav is already a display: flex element in Bootstrap, I removed your absolute positioning from it and added justify-content: center to vertically center the list elements in it.
Here's a diff of my changes to your CSS (yours on the left):
And working example below:
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
height: 100vh;
justify-content: center;
width: 50%;
margin: 0 auto;
text-align: center;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

Categories

Resources