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

Transparent Navbar Create a navbar by CSS & HTML

In the previous tutorial we already explained how to create a transparent navbar in web page using CSS3 and html5.

Follow the tutorial on Tutorial At Home
or visit us at YouTube

Now in this tutorial we change the .CSS file slightly. It will give us a fabulous output. Just try it.

softetechnologies

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>
</div>

</head>
<body>
<div class="container">
<input type="button" value="Enter" class="btn" />
</div>
</body>
</html>

softetechnologies

Css Code

@charset "utf-8";

body
{
position:absolute;
background-image:url(img3.jpg);
width:100%;
}
.navBar
{
position:relative;
width:75%;
left:12.5%;
height:70px;
background-color:rgba(144,123,118,0);
margin-top:50px;
border-radius:25px;
padding-top:10px;
}
.navBar:hover
{
background-color:rgba(144,123,118,0.5);
}
.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;
top:-10px;
}
.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;
}

Video Tutorials

Transparent Menu Creation & use of Icons from awesome Font Dropdown Navbar using CSS and 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.
Mahatma Gandhi
By education, I mean all-around drawing of the best in child and man in body, mind and sprit.
Mahatma Gandhi
1700
37.44
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     34150
28/06/2017     30661
26/05/2018     29689
02/08/2017     28553
25/06/2018     24870
15/05/2017     24337
01/08/2017     23029
06/07/2017     22865
21/04/2018     19069
14/07/2017     18088
softetechnologies