Hey friends, today we’ll create a cool responsive navigation bar using HTML, CSS & JS. As the name suggests, we use it for providing ease of access to users when they visit our website. So, let’s start our HTML CSS responsive navbar project.
HTML Codes
Okay, so first we will need to code our HTML. Generally, all links of the navbar will be stored in an Unordered List Tag as it is a common and good practice.
Besides that we also need to paste the following code in our head tag:
- Import Josefin sans font from Google Fonts
- Import FontAwesome Icons for the bars icon to appear on small screens.
See the Pen Responsive Navbar using flexbox and javascript by Sukhjinder Arora (@Sukhjinder-arora) on CodePen.
CSS Codes
See the Pen Responsive Navbar using flexbox and javascript by Sukhjinder Arora (@Sukhjinder-arora) on CodePen.
Our navigation bar looks stylish enough, however, it needs some more work. This is because the code earlier only styles, positions and makes it responsive. However, when this navigation bar is viewed on small screens/mobile we are supposed to be able to click the icon to open the navbar.
JavaScript Codes
So let’s solve the problem with JavaScript. Add the following code:
See the Pen Responsive Navbar using flexbox and javascript by Sukhjinder Arora (@Sukhjinder-arora) on CodePen.
Make it Work For YOU
- First, you can change the logo Name from logo to your website name
- Secondly, to make the links working, add your link at the <a href=”#”>Blog</a> . Add the # place, type, or paste your link.
Thank You!
Check it more
HTML – CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar – responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!
Written by: @codingporium
HTML – CSS project ideas by Code With Random
calculator Html javascript | calculator javascript code
bootstrap navbar – responsive bootstrap navbar
notification CSS style | Html top bar slide down notification CSS
CSS responsive menu | CSS animated Menu
countdown timer HTML javascript | free countdown timer
A Custom checkbox in CSS? | Create a custom checkbox using CSS?
Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!