You are currently viewing 5 Best Unique HTML CSS Top Bar Examples Free Download
5 best unique html css top bar example

5 Best Unique HTML CSS Top Bar Examples Free Download

Collection of free HTML CSS unique website top bar template with codes examples are updated Nov-2022.

Related Article:

Example #01

5 Best Unique HTML AND CSS Top Bar Examples

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Bar 2</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid text-white py-2 px-lg-5 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center ">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+012 345 6789</a>
<span class="text-body ">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>info@example.com</a>
</div>
</div>
<div class="col-md-6 text-center text-lg-right">
<div class=" social-icons d-inline-flex align-items-center">
<a class="text-body px-3 " href="">
<span><i class="fab fa-facebook-f"></i></span>
</a>

<a class="text-body px-3" href="">
<span><i class="fab fa-linkedin-in"></i></span>
</a>
<a class="text-body px-3" href="">
<span ><i class="fab fa-instagram"></i></span>
</a>
<a class="text-body pl-3" href="">
<span ><i class="fab fa-google-plus-g mr-3"></i></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Example #02:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Bar 3</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid text-white py-2 px-lg-5 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="address-left d-inline-flex align-items-center ">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+012 345 6789</a>
<span class="text-body ">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>info@example.com</a>
</div>
</div>
<div class="col-md-6 text-center text-lg-right">
<div class=" social-icons d-inline-flex align-items-center">
<a class="text-body px-3 " href="">
<span><i class="fab fa-facebook-f"></i></span>
</a>

<a class="text-body px-3" href="">
<span><i class="fab fa-linkedin-in"></i></span>
</a>
<a class="text-body px-3" href="">
<span ><i class="fab fa-instagram"></i></span>
</a>
<a class="text-body pl-3" href="">
<span ><i class="fab fa-google-plus-g mr-5"></i></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

In the bottom section add style.css file

<style>
.container-fluid {
background: #402a23;
}
.container-fluid .address-left a {
color: #fff;
}
.address-left a i{
color: #f8fe85;
}
.social-icons a {
width: 40px;
height: 30px;
border: 3px solid #f8fe85;
border-radius: 17px;

margin-left: 15px;
color: #fff;
}
.social-icons span i{
margin-left: -6px;
}
</style>

Example #03:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Bar 2</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid text-white py-2 px-lg-5 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="address-left d-inline-flex align-items-center ">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+012 345 6789</a>
<span class="text-body ">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>info@example.com</a>
</div>
</div>
<div class="col-md-6 text-center text-lg-right">
<div class=" social-icons d-inline-flex align-items-center">
<a class="text-body px-3 " href="">
<span><i class="fab fa-facebook-f"></i></span>
</a>

<a class="text-body px-3" href="">
<span><i class="fab fa-linkedin-in"></i></span>
</a>
<a class="text-body px-3" href="">
<span ><i class="fab fa-instagram"></i></span>
</a>
<a class="text-body pl-3" href="">
<span ><i class="fab fa-google-plus-g mr-5"></i></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

style.css file

<style>
.container-fluid {
background: darkmagenta;
}
.container-fluid .address-left a {
color: #fff;
font-size: 16px;
letter-spacing: 1px;
}
.social-icons a {
width: 40px;
height: 30px;
border: 3px solid #fff;
border-radius: 17px;
margin-left: 15px;
color: #fff;
}
.social-icons span i{
margin-left: -6px;
}
.social-icons a:hover{
background: navy;
color: orange;
}
</style>

Example #04:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Bar 5</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid text-white py-2 px-lg-2 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="address-left d-inline-flex align-items-center ">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+012 345 6789</a>
<span class="text-body ">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>info@example.com</a>
</div>
</div>
<div class="col-md-2 text-center text-lg-right">
<div class=" social-icons d-inline-flex align-items-center">
<a class="text-body px-3 " href="">
<span><i class="fab fa-facebook-f"></i></span>
</a>

<a class="text-body px-3" href="">
<span><i class="fab fa-linkedin-in"></i></span>
</a>
<a class="text-body px-3" href="">
<span ><i class="fab fa-instagram"></i></span>
</a>
<a class="text-body pl-3" href="">
<span ><i class="fab fa-google-plus-g mr-5"></i></span>
</a>
</div>
</div>
<div class="col-lg-2 text-right mr-0 ">
<div class=" lang-box d-inline-flex align-items-center">
<label class="mt-0">Language :</label>
<select class="lang">
<option>Eng</option>
<option>Ur</option>
<option>Ar</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>

Style.css file

<style>
.container-fluid {
background: #352f44;
}
.container-fluid .address-left a {
color: #fff;
font-size: 16px;
letter-spacing: 1px;
}
.social-icons a {
width: 40px;
height: 30px;
border: 3px solid #dc2f2f;
border-radius: 30px;
margin-left: 15px;
color: #fff;
}
.social-icons span i{
margin-left: -6px;
}
.social-icons a:hover{
background: #fda403;
color: navy;
}
.lang-box select{
margin-left: 3px;
border: 2px solid #dc2f2f;
background: none;
width: 100px;
border-radius: 30px;
color: #fff;
}
.lang-box select option{
color: #fff;
background: #352f44;
border: 2px solid orange;
}
</style>

Example #05:

Create index.html file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Bar 6</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid text-white py-2 px-lg-2 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="address-left d-inline-flex align-items-center ">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i>+012 345 6789</a>
<span class="text-body ">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i>info@example.com</a>
</div>
</div>
<div class="col-md-2 text-center text-lg-right">
<div class=" social-icons d-inline-flex align-items-center">
<a class="text-body px-3 " href="">
<span><i class="fab fa-facebook-f"></i></span>
</a>

<a class="text-body px-3" href="">
<span><i class="fab fa-linkedin-in"></i></span>
</a>
<a class="text-body px-3" href="">
<span ><i class="fab fa-instagram"></i></span>
</a>
<a class="text-body pl-3" href="">
<span ><i class="fab fa-google-plus-g mr-5"></i></span>
</a>
</div>
</div>
<div class="col-lg-2 text-right mr-0 ">
<div class=" lang-box d-inline-flex align-items-center">
<label class="mt-0">Language :</label>
<select class="lang">
<option>Eng</option>
<option>Ur</option>
<option>Ar</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>

Example #05:

Style.css file

<style>
.container-fluid {
background: #085f63;
}
.container-fluid .address-left a {
color: #fff;
font-size: 16px;
letter-spacing: 1px;
}
.social-icons a {
width: 40px;
height: 30px;
border: 3px solid ;
border-radius: 30px;
margin-left: 15px;
color: #fff;
box-shadow: 6px 6px 10px rgba(51, 51, 51, 1);
}
.social-icons span i{
margin-left: -6px;
}
.social-icons a:hover{
text-shadow: 6px 6px 10px rgba(51, 51, 51, 1);
color: #ff4057;
}
.lang-box select{
margin-left: 3px;
border: 2px solid ;
background: none;
width: 100px;
border-radius: 30px;
color: #fff;
}
.lang-box select option{
color: #fff;
background: #352f44;
border: 2px solid orange;
}
</style>

Conclusion:

In this article I have share my own knowledge with those who want to create their site or business site for the customer. Or in the other word they are beginner in HTML and CSS. This article helps them to start the website development. I have repeated the CSS code in last 3 example with little modification so it will be easy for you to understand the code.

Leave a Reply