nav bar css | how to make a nav bar | codepen navbar

nav bar css | how to make a nav bar | codepen navbar

 





Hey friends, today I'll  teach how to make a a cool responsive navigation bar using HTML, CSS & JS. I'm CodingPorium and I make coding tutorials and provide Free Source Code on YouTube at here and teach web development for Free on Instagram at here .

HTML Codes

Okay, so first we will need to code our HTML. Generally, all links of the navbar will be stored in a 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:


<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
 <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"
        crossorigin="anonymous"></script>

What we are doing in the head tag is that we are doing two things:
  • Import Josefin sans font from Google Fonts
  • Import FontAwesome Icons for the bars icon to appear on small screens.

Take a look at the code segment below to learn more on what's below of the head tag:

See the Pen Responsive Navbar using flexbox and javascript by Sukhjinder Arora (@Sukhjinder-arora) on CodePen.


The output would be:

CSS Codes

Now, we will see what happens when we add CSS to style it and position it like below:

See the Pen Responsive Navbar using flexbox and javascript by Sukhjinder Arora (@Sukhjinder-arora) on CodePen.



The output is:

This may seem done but actually we're not done yet. 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. 

But we haven't added JavaScript. Without JavaScript, the navbar will not open completely when the icon is clicked. So next we will add JavaScript.

JavaScript Codes

As I mentioned earlier in the CSS code explanation, we need JavaScript so that the navbar completely opens for small screens when the bars icon is clicked.

Here's how this navbar is without JavaScript:


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.


You can also see the output by clicking the result button in the code segment above. Lastly, let's see what changes we might need to make for this navbar to be better.

Make it Work For YOU

So, now we have coded this responsive navbar. However, we need to edit and change some components to make it work for us better. 
  • 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


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

Post a Comment

Previous Post Next Post