create account

BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR by starstrings01

View this thread on: hive.blogpeakd.comecency.com
· @starstrings01 · (edited)
$40.51
BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR
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.


![20220613_172022_0000.png](https://files.peakd.com/file/peakd-hive/starstrings01/23vhoQXDMKEwkJMydtHnjRyTCqYvayk5ALD1nYLRBLLbhRYc8nrGB57GXJzVqW9NfzDf2.png)


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.


![html Navbar.png](https://files.peakd.com/file/peakd-hive/starstrings01/23tkdcpMvnGfNWVtKDXUBCYGHYFpHaX59wXjVixgCCCpqog7nqcUoUZrwv2W2WDTJyvd8.png)

In my Css Below, I stated some general properties which I normally use when making my CSS style.

![general properties.png](https://files.peakd.com/file/peakd-hive/starstrings01/23tkdfptzkdfoKQEZYhjkd1ujpzqZjAyq9GJM458mZ2DUUyygYSeJJZWBKnqsnsuqom2X.png)

Let's take a look at our browser to see our website look in the image below:


![AFRI-TUNES WEEK 10_ MONALISA BY LOJAY FT. SARZ __ GUITAR COVER 🎸 _ PeakD - Google Chrome 6_13_2022 4_08_51 PM (3).png](https://files.peakd.com/file/peakd-hive/starstrings01/23sxp4JY3W7FyjB6Ku19tgY7JJNkLmDXsDdScDLf42d43NkjufTqjgXoT7ywpt6XA7wSZ.png)

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.



![style.css - NavBar - Visual Studio Code 6_13_2022 4_17_01 PM.png](https://files.peakd.com/file/peakd-hive/starstrings01/23tkdkZSBA13HrNiXmA9B4m1YGE1Hi3h3fzD8b2Vp4yvva2J4a333SjRzTWQwvjvX3jEE.png)




![space-around.png](https://files.peakd.com/file/peakd-hive/starstrings01/23sxnNZkbScaEvzwA8BQiAswG8wnTRNctNkdYYnnDLWNb9bgQnRdvQ2RzzWq8iJxc4jLs.png)

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.


![link deco.png](https://files.peakd.com/file/peakd-hive/starstrings01/23tbFATsKxUjua1YtiVmdmwacBYYraJk2ucNtzCbPN9fxG985nWviaaioz6xnx5cbZBVd.png)


![new look.png](https://files.peakd.com/file/peakd-hive/starstrings01/23sxnNZka1Nw9qwvM4xQsSiisvLWHLJU8YWmu6hmuwzA2KQJQWLo3v6upXLF3Ybowg5ac.png)

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.


![highlited.png](https://files.peakd.com/file/peakd-hive/starstrings01/23tbF6CBs2GEt36mQNgkAYvWwHB1EKn63to3pgpbNC7ZxeqDovXzmSQvn6DMFsvN9mo69.png)

Now we have a different look for our Navigation bar now... If you noticed, I commented off the border as well.


![dif.png](https://files.peakd.com/file/peakd-hive/starstrings01/23sxmq9bgecEywnGAamKtuDNZrQWGcuRFt8ikYUD7xJkk2bMvtCpnt4W5MivrmSgaire8.png)


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.


![border-rad.png](https://files.peakd.com/file/peakd-hive/starstrings01/23sxnMbebuUXhUYuqpQvVfQ5ZZ1VceLeNLmiG7qhNrDJQfBPcDngkZD1tXdzzwXQMDFAs.png)

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.
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 334 others
👎  ,
properties (23)
authorstarstrings01
permlinkbuilding-a-simple-horizontal-navigation-bar
categoryhive-169321
json_metadata{"app":"peakd/2022.05.9","format":"markdown","tags":["programming","development","hive","life","navbar","proofofbrain","vyb","palnet","archon"],"users":[],"image":["https://files.peakd.com/file/peakd-hive/starstrings01/23vhoQXDMKEwkJMydtHnjRyTCqYvayk5ALD1nYLRBLLbhRYc8nrGB57GXJzVqW9NfzDf2.png","https://files.peakd.com/file/peakd-hive/starstrings01/23tkdcpMvnGfNWVtKDXUBCYGHYFpHaX59wXjVixgCCCpqog7nqcUoUZrwv2W2WDTJyvd8.png","https://files.peakd.com/file/peakd-hive/starstrings01/23tkdfptzkdfoKQEZYhjkd1ujpzqZjAyq9GJM458mZ2DUUyygYSeJJZWBKnqsnsuqom2X.png","https://files.peakd.com/file/peakd-hive/starstrings01/23sxp4JY3W7FyjB6Ku19tgY7JJNkLmDXsDdScDLf42d43NkjufTqjgXoT7ywpt6XA7wSZ.png","https://files.peakd.com/file/peakd-hive/starstrings01/23tkdkZSBA13HrNiXmA9B4m1YGE1Hi3h3fzD8b2Vp4yvva2J4a333SjRzTWQwvjvX3jEE.png","https://files.peakd.com/file/peakd-hive/starstrings01/23sxnNZkbScaEvzwA8BQiAswG8wnTRNctNkdYYnnDLWNb9bgQnRdvQ2RzzWq8iJxc4jLs.png","https://files.peakd.com/file/peakd-hive/starstrings01/23tbFATsKxUjua1YtiVmdmwacBYYraJk2ucNtzCbPN9fxG985nWviaaioz6xnx5cbZBVd.png","https://files.peakd.com/file/peakd-hive/starstrings01/23sxnNZka1Nw9qwvM4xQsSiisvLWHLJU8YWmu6hmuwzA2KQJQWLo3v6upXLF3Ybowg5ac.png","https://files.peakd.com/file/peakd-hive/starstrings01/23tbF6CBs2GEt36mQNgkAYvWwHB1EKn63to3pgpbNC7ZxeqDovXzmSQvn6DMFsvN9mo69.png","https://files.peakd.com/file/peakd-hive/starstrings01/23sxmq9bgecEywnGAamKtuDNZrQWGcuRFt8ikYUD7xJkk2bMvtCpnt4W5MivrmSgaire8.png","https://files.peakd.com/file/peakd-hive/starstrings01/23sxnMbebuUXhUYuqpQvVfQ5ZZ1VceLeNLmiG7qhNrDJQfBPcDngkZD1tXdzzwXQMDFAs.png"]}
created2022-06-13 16:06:21
last_update2022-06-13 16:21:18
depth0
children6
last_payout2022-06-20 16:06:21
cashout_time1969-12-31 23:59:59
total_payout_value20.288 HBD
curator_payout_value20.219 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,462
author_reputation942,771,895,262,090
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,025,140
net_rshares85,192,876,299,451
author_curate_reward""
vote details (400)
@hivebuzz ·
Congratulations @starstrings01! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@starstrings01/replies.png?202206131808"></td><td>You got more than 12000 replies.<br>Your next target is to reach 12500 replies.</td></tr>
</table>

<sub>_You can view your badges on [your board](https://hivebuzz.me/@starstrings01) and compare yourself to others in the [Ranking](https://hivebuzz.me/ranking)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Check out the last post from @hivebuzz:**
<table><tr><td><a href="/hive-122221/@hivebuzz/pum-calendar"><img src="https://images.hive.blog/64x128/https://i.imgur.com/5lTSuY9.png"></a></td><td><a href="/hive-122221/@hivebuzz/pum-calendar">Hive Power Month - New Tracking Calendar</a></td></tr></table>
properties (22)
authorhivebuzz
permlinknotify-starstrings01-20220613t183449
categoryhive-169321
json_metadata{"image":["http://hivebuzz.me/notify.t6.png"]}
created2022-06-13 18:34:48
last_update2022-06-13 18:34:48
depth1
children0
last_payout2022-06-20 18:34:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length943
author_reputation370,745,651,007,949
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,028,545
net_rshares0
@hopestylist ·
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. 
properties (22)
authorhopestylist
permlinkre-starstrings01-2022613t20192482z
categoryhive-169321
json_metadata{"tags":["programming","development","hive","life","navbar","proofofbrain","vyb","palnet","archon"],"app":"ecency/3.0.23-vision","format":"markdown+html"}
created2022-06-13 19:19:27
last_update2022-06-13 19:19:27
depth1
children2
last_payout2022-06-20 19:19:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length362
author_reputation515,207,898,532,665
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,029,452
net_rshares0
@starstrings01 ·
> 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.

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.

properties (22)
authorstarstrings01
permlinkre-hopestylist-rdfkni
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.05.9"}
created2022-06-13 19:26:09
last_update2022-06-13 19:26:09
depth2
children1
last_payout2022-06-20 19:26:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length344
author_reputation942,771,895,262,090
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,029,606
net_rshares0
@hopestylist ·
It's so sad I don't have any knowledge of it. I hope I do soon. 
properties (22)
authorhopestylist
permlinkre-starstrings01-2022613t203948320z
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"ecency/3.0.23-vision","format":"markdown+html"}
created2022-06-13 19:39:48
last_update2022-06-13 19:39:48
depth3
children0
last_payout2022-06-20 19:39:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation515,207,898,532,665
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,029,922
net_rshares0
@joebolite97 ·
nice work boss though I prefer floats but I will give this a trial
properties (22)
authorjoebolite97
permlinkre-starstrings01-re8k7p
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.05.9"}
created2022-06-29 11:07:06
last_update2022-06-29 11:07:06
depth1
children0
last_payout2022-07-06 11:07:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length66
author_reputation13,174,697,412,119
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,421,082
net_rshares0
@joebolite97 ·
though i'm still a newbie in coding 
properties (22)
authorjoebolite97
permlinkre-starstrings01-re8k94
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.05.9"}
created2022-06-29 11:07:54
last_update2022-06-29 11:07:54
depth1
children0
last_payout2022-07-06 11:07:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length37
author_reputation13,174,697,412,119
root_title"BUILDING A SIMPLE HORIZONTAL NAVIGATION BAR"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id114,421,090
net_rshares0