×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Horizontal Navigation Bar Creation using CSS and HTML Transparent Navbar II Create a navbar by CSS & HTML
Transparent Menu Creation & use of Icons from awesome Font - CSS 3.0
1631    Arnab De    14/05/2017   

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">

softetechnologies
<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>
Transparent Menu
Transparent Menu

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; 
 }
softetechnologies
.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; 
  }

Video Tutorials

Horizontal Navigation Bar Creation using CSS and HTML Transparent Navbar II Create a navbar by CSS & HTML
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
A lamp can only light another lamp when it continues to burn in its own flame.
Rabindranath Tagore
1727
24.54
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     31116
28/06/2017     26008
02/08/2017     22504
26/05/2018     20489
15/05/2017     19731
06/07/2017     18330
21/04/2018     16980
01/08/2017     16852
01/07/2017     14634
25/04/2018     13847
softetechnologies