Develop Reference

sidebar navigation text not fixed while transition

i try to change css but not work text short text is ok but i have to put long line when click it not smooth while transition working i use template from codeply(https://www.codeply.com/p/RXiaRJEqWj#), i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>
<script>
function Nav() {
var width = document.getElementById("mySidenav").style.width;
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}
</script>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-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;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls

You dont need JQuery with this simple code.
Try this:
function Nav() {
var width = document.getElementById("mySidenav").style.width;
var icon = document.querySelector(".animated-icon");
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
icon.classList.toggle('open');
} else {
document.getElementById("mySidenav").style.width = "0px";
icon.classList.toggle('open');
}
}
body{
margin:0;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-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;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.hamburger-button{
margin:25px;
background-color: rgba(0,0,0,0);
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
.navbar-toggler{
position:relative;
z-index:2;
}
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>

Getting a hamburger menu to close upon clicking a link on Bootstrap 5.2

I have a hamburger menu for the mobile version of a website, when you click the links it takes you to the right place, but the menu doesn't close. Let me clarify I only learnt HTML and CSS, but not Javascript, so I have no idea what I'm doing and I won't until I get around to that, but I need this website before that.
This is the HTML (I included the desktop version navbar just for reference):
<div class="navbar" id="navbar">
<div class="container-fluid">
<div class="col-md-1 offset-1">
<div class="logo" id="logo"><img src="img/"></div>
</div>
<div class="col-md-6 offset-1">
<ul class="navbar-middle">
<li>SERVICIOS</li>
<li>TESTIMONIOS</li>
<li>CONTACTO</li>
</ul>
</div>
<div class="col-md-2">
<ul class="navbar-right">
<li><i class="fab fa-facebook fa-2x"></i></li>
<li><i class="fab fa-instagram fa-2x"></i></li>
</ul>
</div>
<button class="navbar-toggler second-button" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarToggleExternalContent10"
aria-controls="navbarToggleExternalContent10" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
</button>
</div>
</div>
<div class="collapse" id="navbarToggleExternalContent10">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Servicios</button>
<button class="btn btn-link btn-block border-bottom m-0">Testimonios</button>
<button class="btn btn-link btn-block m-0">Contacto</button>
</div>
</div>
The JS as it is:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<script defer src="/your_path_to_version_6_files/js/all.js"></script>
<script language="JavaScript" type="text/javascript">
document.querySelector('.second-button').addEventListener('click', function () {
document.querySelector('.animated-icon2').classList.toggle('open');
});
</script>
And the CSS (all the 'animated icon' stuff is straight from the Bootstrap website, so feel free to skip over that):
.navbar {
position: fixed;
width:100%;
z-index: 10;
overflow: hidden;
}
.navbar-toggler {
display:none;
}
.collapse {
display: none;
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.2s linear;
text-align: center;
}
.collapse.show {
display: block;
position: fixed;
z-index: 3;
width: 100%;
}
.m-0 {
position: relative;
width: 100%;
}
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon2 span {
background: white;
}
.animated-icon2 span:hover {
background: #EC673C;
}
.animated-icon2 span:active {
background: #B22818;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

How can I construct my navbar to work properly?

Basically, I have created a responsive navigation bar for my website. However, there is a problem I am having. When the user shrinks their browser size and clicks the hamburger on the side, the navbar does not work. To fix this, the user will have to refresh the page in order to click the hamburger to see the navbar on a shrinked size. I have tried to fix this but I do not know what is wrong. How can I make sure that the navbar works whenever the screen is decreased so the user will not have to refresh the page? Any help is appreciated. Here is my code below.
$(document).ready(function () {
if (window.matchMedia('(max-width: 767.98px)').matches) {
$(".navbar-toggle").click(function () {
$(".navbar-toggle").toggleClass("cross");
$("#navbarToggle").toggleClass("active");
$("body").toggleClass("overflow-hidden");
});
}
});
header {
-webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
-moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
position: relative;
z-index: 999;
transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
-webkit-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
-moz-transition: .4s;
transition: .4s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
-moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
padding: 0.5rem 0;
}
/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
display: block;
}
.dropdown-menu.dropdown-menu-hover {
margin-top: 0;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
-ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
border-radius: 6px !important;
}
.dropdown-menu.show {
display: block !important;
}
/* dropdown open on hover css end*/
/* custom css for dropdown caret */
.dropdown-toggle::after {
height: 8px;
width: 8px;
border: 0;
border-right: 2px solid #757575;
border-bottom: 2px solid #757575;
transform: rotate(45deg);
position: absolute;
right:15px;
top: 16px;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.navbar-expand-lg .navbar-nav .nav-link.dropdown{
padding-right: 2rem;
}
.navbar-nav .dropdown-toggle{
color:rgba(0,0,0,.5);
}
.navbar-nav .dropdown-toggle:hover{
text-decoration: none;
}
/* rounded buttons css */
.btn-round {
border-radius: 40px;
}
/* css for mobile view */
#media (max-width: 991.98px) {
div#navbarToggle {
-webkit-transform: translateX(-120%);
-ms-transform: translateX(-120%);
transform: translateX(-120%);
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
background: #fff;
z-index: 11;
position: fixed;
left: 0;
width: 300px;
bottom: 0;
top: 0;
height: 100vh;
-webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
}
div#navbarToggle.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.navbar-nav .dropdown-menu{
box-shadow: none !important;
}
.navbar-toggle {
position: relative;
background: #fff;
}
.navbar-toggle-icon {
position: absolute;
background: #a0a0a0;
width: 100%;
height: 2px;
top: 50%;
right: 0px;
margin-top: 0px;
opacity: 1;
}
.navbar-toggle-icon::before {
position: absolute;
background: #a0a0a0;
width: 24px;
height: 2px;
top: 6px;
content: "";
display: block;
}
.navbar-toggle-icon::after {
position: absolute;
background: #a0a0a0;
width: 24px;
height: 2px;
bottom: 6px;
content: "";
display: block;
}
.navbar-toggle-icon::after, .navbar-toggle-icon::before, .navbar-toggle-icon {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.navbar-toggle.cross .navbar-toggle-icon::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
bottom: 0px;
}
.navbar-toggle.cross .navbar-toggle-icon::before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 0px;
}
.navbar-toggle.cross .navbar-toggle-icon {
background-color: transparent;
}
header .navbar-light .navbar-toggle {
border: 0;
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
}
/* animation css for dropdown */
#-webkit-keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#-webkit-keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Navbar</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body translate="no" >
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid container-xl">
<a class="navbar-brand" href="javascript:void(0)">
<h1>Logo</h1>
</a>
<div class="navbar-toggle" data-toggle="collapse" data-target="navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</div>
<div class=" navbar-collapse" id="navbarToggle">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="javascript:void(0)">About</a>
</li>
<li class="nav-item">
<div class="dropdown cursor-pointer align-items-center nav-link">
<a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropwown
</a>
<div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
aria-labelledby="data-nav">
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>All</span>
</a>
<a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
<span>Menu 1</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 2</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 3</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 4</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 5</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link " href="javascript:void(0)">
Contact us
</a>
</li>
</ul>
<div class="nav-buttons">
<div class="nav-item">
<a class="btn btn-round btn-outline-primary btn-light ml-3 btn-sm" href="javascript:void(0)">
Login
</a>
<a class="btn btn-round btn-primary ml-3 btn-sm" href="javascript:void(0)">
Sign Up
</a>
</div>
</div>
</div>
</nav>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src="script.js"></script>
</body>
</html>

This is responsive navbar made by using only bootstrap 4 Classes.
It is not exactly same as you want, i think. But, please check and
take some ref. I have tried to make it same as yours.
CSS Code
<style>
header {
-webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
-moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
position: relative;
z-index: 999;
transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
-webkit-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
-moz-transition: .4s;
transition: .4s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
-moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
padding: 0.5rem 0;
}
.navbar-toggle {
position: relative;
background: #fff;
}
/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
display: block;
text-decoration: none;
}
a{
color: darkgrey;
}
.dropdown-menu.dropdown-menu-hover {
margin-top: 0;
background-color:#f8f9fa!important;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
-ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
border-radius: 6px !important;
}
/* animation css for dropdown */
#-webkit-keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#-webkit-keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
#keyframes m-dropdown-arrow-move-up {
from {
margin-top: 10px;
}
to {
margin-top: 0;
}
}
</style>
HTML code
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<div class="dropdown cursor-pointer align-items-center nav-link">
<a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
aria-labelledby="data-nav">
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>All</span>
</a>
<a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
<span>Menu 1</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 2</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 3</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 4</span>
</a>
<a class="dropdown-item d-flex" href="javascript:void(0)">
<span>Menu 5</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<div class="nav-buttons">
<div class="nav-item">
<a class="btn btn-round btn-outline-primary btn-light ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
Login
</a>
<a class="btn btn-round btn-primary ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
Sign Up
</a>
</div>
</div>
</div>
</nav>
</body>

search overlay on full screen size (not opening)

hey all i want to create overlay full screen search on click so i tried this:
this is the navbar code:
<nav class="navbar navbar-default navbar-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-search"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
and this is overlay code:
<div id="search">
<button type="button" class="close">×</button>
<form>
<input type="search" value="" placeholder="SEARCH KEYWORD(s)"/>
<button type="submit" class="btn btn-primary">Search</button>
</form>
and this is the css:
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: white;
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
background-color: limegreen;
border: black;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: limegreen;
border-color: green;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}
and for jquery i used this:
$(function() {
$('a[href="#search"]').on("click", function(event) {
event.preventDefault();
$("#search").addClass("open");
$('#search > form > input[type="search"]').focus();
});
$("#search, #search button.close").on("click keyup", function(event) {
if (
event.target == this ||
event.target.className == "close" ||
event.keyCode == 27
) {
$(this).removeClass("open");
}
});
$("form").submit(function(event) {
event.preventDefault();
return false;
});
});
i know it is a lot of code but i really need help, on click is not working and on inspect element, nothing is showing on console as error....
any help would be appreciated
thank you for your time guys

Rotate CSS card with jquery and "this"

I use the following code to rotate my CSS card. The problem is when I have a few cards and they all rotate when clicking any button.
I would like to rotate only the card which contains clicked button.
I suppose I should to add a context to my cards by using 'this', but I cannot do it right.
$('button').click(function () {
$('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>

I would like to rotate only the card which contains clicked button.
The cards don't contain the button, but their parents do. You can use closest to find the cardContainer, then find to find the card:
$('button').click(function () {
$(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});
$('button').click(function() {
$(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>
Or as they're siblings, use siblings:
$('button').click(function () {
$(this).siblings('.card').toggleClass('flipped');
});
$('button').click(function() {
$(this).siblings('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>

Use sibling for it. Check following JQuery:
$('button').click(function () {
$(this).siblings(".card").toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>

You can add context using attributes in html that will also be the class of the cards as shown below.
.sibling() in jquery will also work but it needs your html to have exact same sequence of elements
$('button').click(function () {
var cardClass=$(this).attr('data-card');
$('.'+cardClass).toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red card-1">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button" data-card="card-1">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red card-2">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button" data-card="card-2">Rotate card 2</button>
</div>

You can use .prev() to get the previous sibling which in your example is the card, but be aware that changes to your html structure could break it.
$('button').click(function () {
$(this).prev().toggleClass('flipped');
});