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.
