Подскажите пожалуйста как исправить этот кривой икс.
Сначала до клика вид у него нормальный так как надо а после клика становитсья слишком страшным надо преоброзовать на нормальный икс .
И подскажите пожалуйста в каких строках что вы изменили чтобы мне понять суть.
let navButton = document.querySelector(".nav-button");
navButton.addEventListener("click", (e) => {
e.preventDefault();
// toggle nav state
document.body.classList.toggle("nav-visible");
});
header {
height: 80px;
left: 0;
padding: 0.5rem;
position: fixed;
text-align: right;
top: 0;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
width: 100%;
z-index: 500;
}
main {
background-color: #485274;
height: 100vh;
padding-top: 80px;
-webkit-transform-origin: left center;
transform-origin: left center;
transition: -webkit-transform 0.6s 50ms;
transition: transform 0.6s 50ms;
transition: transform 0.6s 50ms, -webkit-transform 0.6s 50ms;
}
.nav-button {
text-transform: uppercase;
outline: none;
}
.nav-wrapper {
background-color: #343c55;
box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75);
height: 100%;
padding-top: 80px;
-webkit-perspective: 1000px;
perspective: 1000px;
position: fixed;
right: 0;
top: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
transition: visibility 0.6s, -webkit-transform 0.6s;
transition: transform 0.6s, visibility 0.6s;
transition: transform 0.6s, visibility 0.6s, -webkit-transform 0.6s;
visibility: hidden;
width: 25vw;
}
.nav-visible .nav-wrapper {
-webkit-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
.nav {
position: relative;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: left center;
transform-origin: left center;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.nav-visible .nav {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.nav li.active a {
background-color: #212635;
}
.nav a {
display: block;
line-height: 1.4;
padding: 0.7em 0.5em 0.7em 1.4em;
text-transform: uppercase;
}
.nav a:focus, .nav a:hover {
background-color: #2b3145;
text-decoration: none;
}
.nav-marker {
background-color: currentColor;
height: 2.8rem;
position: absolute;
right: 0;
top: 80px;
width: 3px;
}
.nav-marker:before {
border: 5px solid transparent;
border-right-color: inherit;
content: "";
height: 0;
position: absolute;
right: 3px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
}
.color-1 {
color: deeppink;
}
.button-lines {
margin-right: 20px;
position: relative;
z-index: 50;
background: transparent;
border: none;
cursor: pointer;
display: inline-block;
padding: 1rem 0.5rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.lines {
background: #000;
border-radius: 0.2rem;
display: inline-block;
height: 0.2rem;
width: 2rem;
position: relative;
}
.lines:after {
background: #000;
border-radius: 0.2rem;
display: inline-block;
height: 0.2rem;
width: 0.9em;
content: "";
right: 0;
position: absolute;
}
.lines:before {
background: #000 !important;
border-radius: 0.2rem;
display: inline-block;
height: 0.2rem;
width: 2rem;
content: "";
left: 0;
position: absolute;
}
.lines:after {
top: 0.5rem;
}
.lines:before {
top: -0.5rem;
}
.button-lines-x .lines {
transition: background .3s ease;
}
.button-lines-x .lines:after, .button-lines-x .lines:before {
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
transition: top .3s .4s ease, -webkit-transform .3s ease;
transition: top .3s .4s ease, transform .3s ease;
transition: top .3s .4s ease, transform .3s ease, -webkit-transform .3s ease;
}
.nav-visible .button-lines-x .lines {
background: transparent;
}
.nav-visible .button-lines-x .lines:after, .nav-visible .button-lines-x .lines:before {
top: 0;
transition: top .3s ease, -webkit-transform .3s .3s ease;
transition: top .3s ease, transform .3s .3s ease;
transition: top .3s ease, transform .3s .3s ease, -webkit-transform .3s .3s ease;
}
.nav-visible .button-lines-x .lines:after {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
.nav-visible .button-lines-x .lines:before {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
<header>
<h1 class="header-title">Bulbasaur</h1>
<button aria-label='Toggle menu' class='nav-button button-lines button-lines-x close' role='button' type='button'>
<span class='lines'></span>
</button>
<nav class='nav-wrapper'>
<ul class='nav'>
<li class='active'>
<a href='#'>Page 1</a>
</li>
<li>
<a href='#'>Page 2</a>
</li>
<li>
<a href='#'>Page 3</a>
</li>
<li>
<a href='#'>Page 4</a>
</li>
</ul>
<span class='nav-marker color-1'></span>
</nav>
</header>