how to make a top nav menubar using html and css by shantohakim

View this thread on steempeak.com
· @shantohakim · (edited)
how to make a top nav menubar using html and css
![screenshot--2018-04-17-00-43-58.png](https://steemitimages.com/DQmTfSHBsPj79DwVJy1cEypog3ykCcapB2NvnNYsXaJBj6F/screenshot--2018-04-17-00-43-58.png)Hi guys,whats up. In this post ,I will show you how to make topnav menubar;          





<!DOCTYPE html>
<>
<>
< name="viewport" content="width=device-width,initial-scale=1">
<>Top nav(menu)</title>
<>
body{
     margin:0;
	 font-family:arial,helvetica,sans-serif;
	 }
.topnav{
       overflow:hidden;
	   background-color:#333;
}
.topnav a {
       float:left;
       text-align:center;
       text-decoration:none;
       font-size:20px;
	   padding:14px 16px;
	   color:#f2f2f2;
}
.topnav a:hover{
            background-color:#ddd;
            color:black;
}
.topnav a.active{
             background-color:#4CAF50;
}
</>
</>
<>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<h2>Navigation Menubar</h2>
<p>Lorem ipsum dolor sit amet
</body>
</html>
👍  , ,
👎  , , , , ,
properties (23)
post_id43,910,255
authorshantohakim
permlinkhow-to-make-a-top-nav-menubar-using-html-and-css
categoryhtml
json_metadata"{"links": ["#home", "#news", "#contact", "#about"], "format": "markdown", "app": "steemit/0.1", "image": ["https://steemitimages.com/DQmTfSHBsPj79DwVJy1cEypog3ykCcapB2NvnNYsXaJBj6F/screenshot--2018-04-17-00-43-58.png"], "tags": ["html", "css", "coding"]}"
created2018-04-16 18:46:21
last_update2018-04-16 18:48:18
depth0
children1
net_rshares1,535,616,752
last_payout2018-04-23 18:46:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length1,008
author_reputation0
root_title"how to make a top nav menubar using html and css"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (9)
@steemitboard ·
Congratulations @shantohakim! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@shantohakim/birthday1.png</td><td>Happy Birthday! - You are on the Steem blockchain for 1 year!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@shantohakim) and compare to others on the [Steem Ranking](http://steemitboard.com/ranking/index.php?name=shantohakim)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
post_id72,918,969
authorsteemitboard
permlinksteemitboard-notify-shantohakim-20190411t164921000z
categoryhtml
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2019-04-11 16:49:21
last_update2019-04-11 16:49:21
depth1
children0
net_rshares0
last_payout2019-04-18 16:49:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length630
author_reputation38,705,954,145,809
root_title"how to make a top nav menubar using html and css"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000