DEV Community

loading...
Cover image for Responsive Navbar with only HTML and CSS

Responsive Navbar with only HTML and CSS

Atul Prajapati
HTML, CSS, Bootstrap, XML, ajax, react js, WordPress, Magento, Shopify, Photoshop, Camtasia, SEO & learning new skills every moment 👨🏼‍💻 | I believe in learning and sharing with others 🛴
・1 min read

Yes, you can make a responsive navbar with only HTML and CSS. Let's learn how?

First of all, you have to create an HTML file with these codes.

Responsive navbar HTML code

In this HTML file, I have created a nav tag for navigation I that I have separated into elements first is menu links which is visible by default on the desktop screen and second is the square box which will visible on small screen devices to hide/show the menu links in smartphone screens.


I have used <section></section> tag to add a huge image to cover the blank screen of the device.

That's it for the HTML code.


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200&display=swap');

By this line of code, I'm getting 'Poppins' font family from google font


Now i just you to play around with this codepen project

NOTE: ~ this is if else condition

Discussion (4)

Collapse
idarek profile image
Dariusz Więckiewicz

Interesting!

Collapse
atulcodex profile image
Atul Prajapati Author

yes it is :)

Collapse
amircahyadi profile image
Amir-cahyadi

Prety cool

Collapse
atulcodex profile image
Atul Prajapati Author

thanks Amir