queries problem

[Matej]

Hi , im building navigation menu , it has round shape , i would like t odo it responsive so whenever the width<420px it will become typical navigation menu (float: none and width 100% = hope you get me), but it doesnt behave just like i would like to . here is a code

html

 

<nav>     <div class="holder">        <ul class="kek">            <li><a href="#"><i class="fa fa-bell"></i></a>             </li>            <li><a href="#"><i class="fa fa-anchor"></i></a>             </li>            <li><a href="#"><i class="fa fa-book"></i></a>             </li>            <li><a href="#"><i class="fa fa-eyedropper"></i></a>             </li>            <li><a href="#"><i class="fa fa-cloud"></i></a>             </li>            <li><a href="#"><i class="fa fa-coffee"></i></a>             </li>            <li><a href="#"><<i class="fa fa-fire "></i></a>            </li>            <li><a href="#"><i class="fa fa-folder-open"></i>></a>             </li>        </ul>     </div><div id="menu"></div>    </nav>

css

 

* {    margin:0;    padding:0; }nav {    position:absolute;   width:26em;    height:26em;margin: auto;top: 0; left: 0; bottom: 0; right: 0; }.holder {font-size:1em;     position:absolute;    z-index: 10;     overflow:hidden;     width:26em;     height:26em;     border-radius:50%;       -webkit-transform:scale(0) rotate(0) translateZ(0);     -webkit-transition:1s ease all;}.holder.active {     -webkit-transform:scale(1) rotate(360deg) translateZ(0);}.holder ul li {    position:absolute;    width:14em;    height:13em;    left: 50%;    top: 50%;    transform-origin: 100% 100%;    overflow: hidden;    font-size:2 em;    ;    margin-top:-13em;    -webkit-transition:1s ease all;}.holder ul li:nth-child(1) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(2) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(3) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(4) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(5) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(6) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(7) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(8) {    -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li a {    display:block;    position:absolute;    -webkit-transform:skew(-45deg) rotate(-67.5deg) translateZ(0);    width:15em;    height:15em;    -webkit-transition:1s ease all;    bottom: -6.25em;    right: -6.25em;    text-decoration: none;    text-align:center;    font-size: 1.18em;    padding-top:1.8em;    color:black;}.holder ul li a:hover{color:white}.holder li:nth-child(odd) a {    background-color: #00AAE4;}.holder li:nth-child(even) a {    background-color: #00FF7F} #menu {    width:5em;    height:5em;    background-color:black;    border-radius:50%;    position:relative;    z-index:20;    margin:10em auto;    cursor:pointer;}.fa{text-align:center;display:inline-block;margin-top:3em;;nav {     width:100%;height:100%;position:absolute;}.holder {           width:100%;    height:100%;     border-radius:0;      -webkit-transform:scale(0) rotate(0) translateZ(0);    -webkit-transition:1s ease all;}  .holder ul li {    position:relative;    width:100%;    height:12.5%;    left: 0%;    top: 0%;    float:none;      margin:0;     -webkit-transition:1s ease all;}.holder ul li a {        display:block;     position:relative;     -webkit-transform:skew(0deg) rotate(0deg) translateZ(0);     width:100%;     height:100%;     -webkit-transition:1s ease all;         text-decoration: none;     text-align:center;}#menu{display:none}}

javascript

 

var y = 0;var delay = 0;var spin = true;var intervals = [];var menu=document.getElementById("menu");var holder = document.getElementsByClassName("holder")[0];var x = document.querySelectorAll(".holder ul li");menu.addEventListener("click",function () {    Array.prototype.forEach.call(intervals, function (element) {        window.clearTimeout(element);    });    delay = 0;    if (spin) {        if (!holder.className.match("active")) {            holder.classList.add("active");            delay = 1000        }         intervals.push(setTimeout(function () {            for (var i = 0; i < x.length; i++) {                x[i].style.transform = "rotate(" + y + "deg) skew(45deg) translateZ(0)";                y += 45;            }            y = 0;            spin = false;        }, delay))    } else {        for (var j = 0; j < x.length; j++) {            x[j].style.transform = "rotate(" + y + "deg) skew(45deg) translateZ(0)";         }        spin = true;        intervals.push(setTimeout(function () {            if (holder.className.match("active")) {                holder.classList.remove("active");             }        }, 1000));    }   },false); /*window.onresize=function(){if(window.innerWidth<420){for(var i =0;i<x.length;i++){x[i].style.transform = "rotate(0deg) skew(0deg) translateZ(0)";//x[i].firstChild.style.transform="skew(0deg) rotate(0deg) translateZ(0)"} }}*/files in attachment

thanks for answers

kokodrilo.html

magic.css