Is there any possibility to make navigation bar responsive by using only HTML and CSS?

Tell us what’s happening:
Now I am developing a personal portfolio page as a part of FCC curriculum. When a device viewport shrinks, I want to hide current nav menus under a single button called menu button.

when I googled it, most of the people use javascript and some other languages in their code but I need to implement with only using HTML and CSS. Is it possible?

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:

Why do you need to only use HTML and CSS?

It is possible using media queries to use on HTML and CSS.

See this page for a menu which uses only HTML and CSS

1 Like

Hey @Saseek,

Ofcourse, it is possible.
First go about making a normal navigation bar and then go about making it responsive using Css grids, flexbox and media queries.
However, if you want a quick fix, you can use bootstrap and you will have a good-looking responsive navbar.
Hope that helps.

1 Like

Because FCC recommends using plain CSS and HTML only. No other specific reason

In the same paragraph it states “You can use Bootstrap or SASS if you choose.”

Yes, but I am a beginner, and I don’t know all those languages. However thanks for your timely reply😊

Then stick with plain CSS for now and then you can always make changes to your projectsr once you have learned about Bootstrap and SASS.

1 Like