Guide to responsive navbar just by simple CSS

Tram Ho

Preamble

This article I will show you how to responsive navbar with just css
As people often see when using the phone, there will be 1 icon bar to view the content of the navbar, usually people will think to do this using javascript but actually css still can do it.

content

First we create a navbar as usual, add an input card with type checkbox, and also have icon bars and I will hide it just to show it on mobile.

This navbar will appear on your pc

Now I will create an overlay and make it invisible as well

Normally, the navbar content on pc and mobile is not the same, so I will create 1 more mobile navbar with icon times to close.

Initially I will hide it on the left side of the screen and give it an in motion effect using properties

Now we will use the: checked property of the input tag with the above type checkbox
Surely everyone also knows the effect of label tags on checkboxes, right
Now our job is to rename the tags containing the overlay, icon times, icon bars, I will collapse them for everyone to see.

The css code below roughly means that when the input tag is checked by the icon bar, the mobile navbar will slide from left to right. Plus the overlay will be hidden.
The @media part means that when the screen is below 1024px, it will lose your pc’s navbar and show icon bars.

It seems verbose, so you can see the code here for more visualization

https://codepen.io/duyvu0302/pen/LYxeQJQ

End

The above article I said to guide you to make responsive navbar on mobile using just css, you can also do more things with it like modal for example …
Hope this article is useful for you. Thank you for your interest !
Reference source: https://www.youtube.com/watch?v=HYy4c6lcOlM&t=1457s

Share the news now

Source : Viblo