Skip to content
Sign upLog in
← Back to Community

How to make a responsive Navigation Bar Easily!

Profile icon

How to make a Responsive Navigation Bar

This is my first ever post on repl, so please bare with me if anything goes wrong. In this post i will be showing you how you can make your very own navigation Bar. Navigation Bars are very common in websites and help you to navigate around the pages of the website

Things done in this tutorial:

  • Use basic html to get the base of the navbar
  • Use CSS to make the navbar look good
  • Use Some more CSS to make hover effects

Final Product:

Navbar look

So lets begin!

At first we will need to use div elements of html to get the base of the navigation bar. You can copy paste the code below under the body element of your html file
<div id="Navbar"> </div>
Now once we have the base ready, we will start adding the links to the navbar so people can move around the pages.
We can do this by adding <a> Elements, which helps us to add links.Copy paste this code inside the div that we created earlier
<a href="index.html" class="NavMain"><b>CODEZ</b></a> <a href="#store" class="NavLink">Store</a> <a href="#vouches" class="NavLink">Vouches</a> <a href="#showcase" class="NavLink">Showcase</a>
The topmost link should be the actual name of your website
so if your websites name is "Python" replace the "CODEZ" with the word "Python" As simple as that.
In the same way if you wish to change the name of the sub elements, you can do so by changing the word "store" to "download" or anything you wish to change it to.
Now that thats done... lets make the navbar look good!
Inside your CSS file, copy paste the exact code shown below, although feel free to change it to your liking:

background-color: #3b403e; border-radius: 0.4rem; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; overflow: hidden; } .NavMain { text-decoration:none; float: left; padding-left: 2rem; padding-top: 9px; color: whitesmoke; font-family: 'Oswald', sans-serif; font-size: 20px; } .NavLink { text-decoration: none; font-family: 'Oswald', sans-serif; float: right; padding: 14px 16px; color: white; display: block; text-align: center; } .NavLink:hover { text-decoration: none; font-family: 'Oswald', sans-serif; float: right; padding: 14px 16px; color: white; display: block; background-color: #5d616e; text-align: center; }

Also if you dont want to code much, feel free to fork the repl below, and everything should be ready!!
And thats all! You have yourself a responsive navigation bar!

Profile icon
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon

Plugins are of great help when you are coding. Many students of computer science while doing coding need different plugins. This is the good help about the plugins. The writing papers complete of the assignments with the help of the plugins. All thank to you for this wonderful post.

Profile icon

Thank you! :)

Profile icon

Thank you very much, this was what I was looking for!
world of solitaire

Profile icon


Profile icon

If you face any problems, let me know in the comments!

Profile icon

how can i add a picture to the main page?