Transparent Menu Creation Using CSS

We can create a menu which has no background color. But It gives an awesome outlook of the page. We can also attach some icons from fontawesome. io. we can change the size of the icon as we change the size of the text on webpages.

Html Code

<html>
<head>
<title>CSS NavBar</title>
<link rel="stylesheet" type"text/css" href="Navbar.css">
<link rel="stylesheet" type"text/css" href="css/font-awesome.css">

<div class="navBar">

<ul class="nav">
  <li class="leftalign">
      <a href="#"><font size=7><i class="fa fa-heartbeat"></i></font></a>
  </li>
  <li class="rightalign"><a href="#">Articles</a></li>
  <li class="rightalign"><a href="#">Notes</a></li>
  <li class="rightalign"><a href="#">Info</a></li>
  <li class="rightalign"><a href="#">Search</a></li>
  <li class="rightalign"><a href="#"><i class="fa fa-home"></i>Home</a></li>
</ul>

Css Code

@charset "utf-8";
body
{
	position:absolute;
 	background-image:url(img3.jpg);
 	width:100%;
 }
.navBar{
	position:relative;
 	width:100%;
 	height:70px;
 }
 .nav{
 	list-style:none;
 }
 .nav li
 {
 	display:inline-block;
 	padding-left:15px;
 	padding-right:30px;
 	position:relative;
 }
.nav li a{
	color:#ffffff;
 	font-weight:bold;
 	font-size:20px;
 	text-decoration:none;
 } 
 .leftalign { 
 	float:left;
 } 
 .rightalign { 
 	float:right; 
 }

.nav li a:hover {
    color:#ff9900; 
}
container { 
    width:75%; 
    left:12.5%; 
    position:relative; 
    padding:25px; 
    padding-top:15%; 
    margin-top:30px; 
} 
.btn{
    width:20%; 
    left:40%; 
    padding:25px; 
    border-style:solid; 
    border-width:thick; 
    border-color:#ffffff; 
    background-color:#ff9900; 
    position:relative; 
    border-radius:15px; 
    color:#ffffff; 
    font-weight:bolder; 
    font-size:20px; 
  } 
 .btn:hover { 
 	color:#ff9900; 
    background-color:#ffffff; 
  }