Transition on navigation bar not working?

Transition on navigation bar not working? - javascript

I have this navbar but when it opens to show the content, I want it to open smoothly (With Transition) but it won't work.
Here is the example:
/* Google Fonts Import Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: #11101d;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close{
width: 78px;
}
.sidebar .logo-details{
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar .logo-details i{
font-size: 30px;
color: #fff;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name{
font-size: 22px;
color: #fff;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links{
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
display: block
}
.sidebar .nav-links li i{
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
font-size: 18px;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: #1d1b31;
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
transition: .5s;
}
.sidebar .nav-links li .sub-menu a{
color: #fff;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details{
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1b31;
padding: 12px 0;
transition: all 0.5s ease;
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.sidebar .profile-details .profile-content{
display: flex;
align-items: center;
}
.sidebar .profile-details img{
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: #1d1b31;
transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
color: #fff;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.sidebar .profile-details .job{
font-size: 12px;
}
.home-section{
position: relative;
background: #E4E9F7;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content{
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu{
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
body {
width: 100%;
margin: 0;
background-color: rgb(221, 221, 221);
}
.nav {
width: 100%;
background-color: rgb(0 88 114);
text-align: center;
padding-bottom: 5px;
}
h1 {
margin: 0 auto;
color:white;
font-family: Tahoma;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Codify.net</title>
</head>
<body>
<header>
<div class="nav">
</div>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-html5'></i>
<span class="logo_name">Learn HTML5</span>
</div>
<ul class="nav-links">
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-chevron-right-circle' ></i>
<span class="link_name">Let's Start!</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Let's Start!</a></li>
<li>Set-up Environment</li>
<li>How HTML Works</li>
<li>HTML Structure</li>
</ul>
</li>
</div>
<script>let arrow = document.querySelectorAll(".arrow");for (var i = 0; i < arrow.length; i++) {arrow[i].addEventListener("click", (e)=>{let arrowParent = e.target.parentElement.parentElement;arrowParent.classList.toggle("showMenu");});};</script>
</header>
</body>
</html>
As you can see it looks and functions fine but then it needs a smooth transition once the arrow is clicked.
I tried the simple transition: 0.5s; but it does not seem to work.
I was hoping someone could help me out or spot my mistake.

Related

my #media CSS selector isn't working, When I change the screen size, nothing happens

I am trying to make a burger menu button appear in the right hand corner of the screen when it gets to a certain size (960px) but when I minimize the window nothing shows up..
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll website</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
</html>
style.css : (if you comment out 'top: -1000px' in the media query, the menu screen will drop down)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display:flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius:4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
}
Please help, I feel like I've tried everything and nothing works.

The reason why it does not appear
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
no information to appear here.
You can add an icon or a text inside, or you can fill in the spans.
Remember that the main color of the texts is black, you may not see it because you are black on your background. You will need to color it.

You are not actually doing anything as of yet. Add a navbar, then add a script. I used your classlist to toggle in this scenario:
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-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;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
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;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll website</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-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;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
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;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
</style>
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
<script>
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
</script>
</html>

How can I make my objects resize automatically in my navbar?

I'm having a trouble with my navbar while making it being responsive, because the objects inside my search bar are not resizing by itself. I have this navbar at codepen https://codepen.io/51LV3R/pen/rNMGWLK. The objects are placeholder of the input and the search icon, which is not shown here, but it's there. I would really appreciate help, since I've been working on this navbar whole 2 days without pausing. How can I do that? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
<a href="#" class="nav-link n2" >Mac</a>
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('activev2')
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('activev2')
})
})
</script>
</body>
</html>
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
transition: .3s!important;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.activev2{
transition: .5s;
transform: scale(1);
}
.nav-link.activev2:hover{
transition: .3s!important;
}
.n1.activev2{
transition-delay: 0.0005s!important;
}
.n2.activev2{
transition-delay: 0.0025s!important;
}
.n3.activev2{
transition-delay: 0.005s!important;
}
.n4.activev2{
transition-delay: 0.025!important;
}
.n5.activev2{
transition-delay: 0.05s!important;
}
.n6.activev2{
transition-delay: 0.1s!important;
}
.n7.activev2{
transition-delay: 0.15s!important;
}
.n8.activev2{
transition-delay: 0.2s!important;
}
.n9.activev2{
transition-delay: 0.25s!important;
}
.n10.activev2{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.linev2{
display: none;
opacity: 0;
visibility: hidden;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .2s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.nav-list-larger .nav-item:nth-child(8){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
.close-btn{
display: none;
}
.n9{
display: none;
}
.searchbox{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5.7rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 11px;
width: 90%;
transition: opacity .6s;
transform: translateX(-50%);
}
.search{
transform: translate(-82%, -25%);
}
.confirm{
width: 85%;
height: 15px;
margin-bottom: 10px;
}
.searchbox-active{
display: none;
opacity: 0;
visibility: none;
transform: translate(0)!important;
transition: none;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
setTimeout(()=> {
document.querySelector('#box').focus()
}, 1000)
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}

It seems like the problem your running into is with the form tags defaults which are:
form{
display: block;
margin-top: 0em;
}
These could be change into something like:
form{
display:inherit;
width:100%;
height:100%;
}

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

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

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

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

Swipe sidebar menu doesn't work in chrome

i did the menu from that template
https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html
but it work only in firefox/edge/safari(ios). and doesn't work in chrome/opera and other browsers
as i see in debug (F12) menu in chrome, after swipe js add "open-sidebar" class but menu didn't appear on the screen
what i did wrong?
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { left: 240px; }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>
By the way, when i was forming my snippet for i've found my mistake.
.container{
position:sticky;
}
I don't know why that works in firefox/edge/safari and pre-installed browser on my few android phones.

Use transfrom:
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { transform: translate(240px, 0); }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>

Links jumping on hover

I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-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: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 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;
}
#nav-icon4 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;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>

go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}

Develop Reference

JavaScript is the programming language of the Web.

Transition on navigation bar not working? - javascript

Related

my #media CSS selector isn't working, When I change the screen size, nothing happens

How can I make my objects resize automatically in my navbar?

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

Swipe sidebar menu doesn't work in chrome

Links jumping on hover

Categories

Resources