One of the first tasks I gave myself when I started practicing coding was to build a Navbar. It was so tough for me at instance until I finally got to do it; that was exactly when I learned to use flexbox. It made it easier to do. Although it is possible to make a navigation bar using floats, that is an old style. Flexbox makes it very easy and faster to do by the way.
If you want to join me in trying this out, you would need to have a few things on your computer. First, I would be making use of virtual studio code (Vscode) as my IDE/Code Editor.
In the image below, I have created a NavBar folder in which I added a navbar.html and style.css file linked together. For the Navbar, I would be making a Home, Login, Contact Us, and Register button on it. For this, I would be making use of Flexbox in making my NavBar.
In my Css Below, I stated some general properties which I normally use when making my CSS style.
Let's take a look at our browser to see our website look in the image below:
We pretty much made our first website with these features already but to make this be horizontal, this is when I added the flexbox features by first displaying my ul container as flex, then justifying the content to space-around, and giving it padding of 1em. I also gave it a gray background using the color code of #ddd. We then have a result of this below.
You may see a border around the navigation bar above. I love doing that so that I can see what I am doing and know how I can put things in place.
From there. I go on to styling the links since I have made my navigation bar horizontal already.
Now to style the links one of the first thing I change is the text color and the underline on the text. I did that by changing the text-decoration to none and changing the text color to black. I gave the container of my links a 1em padding for further decoration.
To have something more finer and attractive, I decided to change the background color of my ul container to blue and the text color to white. I think it would make it finer that way. So the highlighted items, was what I changed in the code below.
Now we have a different look for our Navigation bar now... If you noticed, I commented off the border as well.
There you go, you have your simple navigation bar created.
To give it a slightly different look, I decided to change the padding of the links to 0.4em, then add a border-radius of 40px with dark blue border color. Below is the code with the results.
Now, we have something a little bit different... So here is a simple horizontal navigation bar using flex box. later I would show my code on how to do it using floats.
Congratulations @starstrings01! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):
Your next target is to reach 12500 replies.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Oh my, it felt like you were performing magic because I could barely understand the codes you were using but I got the fact that you made a navigation bar and it was so cool.
I'm glad you made your first post to show us how you do this coding thing, it would be fun to learn but I don't have a computer now, maybe when I get one I'd like to apply for tutoring.
Lol.. I can understand! It needs a deeper level of understanding to get what I explained here! But if you had primary knowledge then you would understand what I used here.
It's so sad I don't have any knowledge of it. I hope I do soon.
nice work boss though I prefer floats but I will give this a trial
though i'm still a newbie in coding