ul{display:flex;width:400px;margin:0;padding:0;z-index:1000}li,ul{position:relative}li{width:50px;height:50px;list-style:none;z-index:1}.navbar-links a{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;font-weight:500}.icon,.navbar-links a{position:relative;text-align:center}.icon{display:block;color:#ffffff80;line-height:50px;font-size:1em;transition:.5s}.navbar-links a:hover .icon{color:#494949}li.active .icon{transform:translateY(-8px);color:#FFF}.text{position:absolute;font-size:.5em;letter-spacing:.05em;text-transform:uppercase;font-weight:600;transform:translateY(10px);color:#222327;transition:.5s;opacity:0}li.active .text{transform:translateY(6px);opacity:1}.indicator{width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.5s;z-index:-1}.indicator,.indicator:before{position:absolute;border-radius:10px}.indicator:before{content:"";width:100%;height:10px;background:#FFF;bottom:14px}@keyframes animate{0%,to{transform:rotate(35deg)}50%{transform:rotate(55deg)}}.indicator{--pos-1:translateX(calc(50px * 1));--pos-2:translateX(calc(50px * 2));--pos-3:translateX(calc(50px * 3));--pos-4:translateX(calc(50px * 4))}li:nth-child(2).active~.indicator{transform:var(--pos-1)}li:nth-child(3).active~.indicator{transform:var(--pos-2)}li:nth-child(4).active~.indicator{transform:var(--pos-3)}li:nth-child(5).active~.indicator{transform:var(--pos-4)}