Skip to content
Sign upLog in
← Back to Community

How to make a responsive Navigation Bar Easily!

Profile icon
RobertCodez

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!

Voters
Profile icon
ShamsAl-Dawoodi
Profile icon
MakaylaHorton
Profile icon
livethegame2
Profile icon
QuinnSchw
Profile icon
JWZ6
Profile icon
RobertCodez
Comments
hotnewtop
Profile icon
JohnMartin13

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
RobertCodez

@JohnMartin13
Thank you! :)

Profile icon
[deleted]

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

Profile icon
JWZ6

nice

Profile icon
RobertCodez

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

Profile icon
AlyssaCruz

@RobertCodez
how can i add a picture to the main page?