Hello there!
Could you please help me with making the menu for mobiles?
There are some html and css:
ul {
display: flex;
flex-direction: row;
font-size: 22px;
}
li {
position: relative;
list-style-type: none;
margin-right: 50px;
cursor: pointer;
color: black;
}
li:last-child {
margin-right: 0px;
}
li:after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
li:nth-child(1):after {
background: #ED4337;
}
li:nth-child(2):after {
background: #A1D3A2;
}
li:nth-child(3):after {
background: #50B8E7;
}
li:nth-child(4):after {
background: #efe200;
}
li:nth-child(1):after {
clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
height: 85px;
width: 75px;
bottom: -47px;
animation: stretch 2s ease infinite;
}
@keyframes stretch {
25% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
li:nth-child(2):after {
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
height: 55px;
width: 75px;
bottom: -18px;
animation: stretch2 1.5s ease infinite;
}
@keyframes stretch2 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
li:nth-child(3):after {
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch3 2s ease infinite;
}
@keyframes stretch3 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
li:nth-child(4):after {
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch4 2s ease infinite;
}
@keyframes stretch4 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
li:hover:after {
animation: boink 1s ease forwards 1;
}
@keyframes boink {
80% {
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
@media (max-width: 600px) {
li {
font-size: 15px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-wrapper {
height: 100vh;
width: 100vw;
overflow: hidden;
position: fixed;
background: transparent;
}
.decisive {
position: fixed;
width: 25vw;
top: 10vh; /* changed for snippet demo only */
right: 0;
}
.inner-wrapper {
height: 80vh; /* increased for snippet demo only */
padding: 20px;
}
.left {
width: 20%;
height: 100%;
float: left;
text-align: center;
position: relative;
}
.left span {
position: absolute;
top: 50%;
left: -100%;
transform: translate(100%, 100%) rotate(-90deg);
}
````<div class="outer-wrapper">
<div class="decisive">
<div class="inner-wrapper">
<div class="left"> <nav><span> <ul>
<li><a title="portfolio" href="#portfolio" style="font-family:'Oswald'; color: black;">TEXT</a></li>
<li><a title="news" href="#news" style="font-family:'Oswald'; color: black;">TEXT</a></li>
<li><a title="services" href="#services" style="font-family:'Oswald'; color: black;">TEXT</a></li>
<li><a title="team" href="#team" style="font-family:'Oswald'; color: black;">TEXT</a></li>
</ul>
</span> </nav>
</div>
</div>
</div>
</div>`
How could I adapt that for mobiles?