I want to create a responsive nav bar

Question

Using html and css

Answer 1

Use breakpoints to define the style as the screen width changes. Use '@media screen' in your CSS files to call the correct styling based on user device size.

I recommend a horizontal nav bar for screens bigger than a small tablet and a vertical bar for screens at or below a small tablet size.

A common breakpoints schema I've seen is at every 360px, i.e. 0-360px for mobile, 361-720px for small tablet, 721-1080px for small desktop/laptop, 1081-1440px for normal desktop, 1441+px for large screens.