Responsive Navbar CSS | how to make a navbar | codepen navbar
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.
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:
<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”
By adding this code snippet to the head tag we are accomplishing the following task:
- 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:
The output would be:
Next, we’ll add CSS to style our HTML layout and position it like below:
The output is:
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.
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.
Check it more