How to make a responsive Navigation Bar Easily!
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!
klondike solitaire great entertainment, relieve stress every stressful work!
Thank you very much, this was what I was looking for!
world of solitaire
nice
If you face any problems, let me know in the comments!
@RobertCodez how can i add a picture to the main page?
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.
@JohnMartin13 Thank you! :)