Day # 65: Rotating navbar

Navbars are one of the essential features for any website. As frontend developers, we need to be able to create and design them on a regular basis. However, sometimes our clients may ask for more innovative navbars than the regular ones.

I recently found a navbar that seemed to rotate slightly when you clicked on it, so I decided to give it a try at copying that design.

The key here is to hide first that navbar:

.circle-container {

    position: fixed;

    top: -100px;

    left: -100px;

}

Then we can achieve that rotating effect by using the transform property and its rotate value:

.container.show-nav .circle {

    transform: rotate(-70deg);

}

And lastly, we need to take care of the list items of the navbar:

nav ul li + li {

    margin-left: 15px;

    transform: translateX(-150%);

}