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:

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!