<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> header one </title>
<!-- external css link -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- end -->
</head>
<body>
<!-- header -->
<div class="nav_header">
<div class="container-fluid">
<div class="container">
<div class="wrapper clearfix">
<div class="address_menu">
<ul>
<li> <a href="">
<span> <i class="fa fa-map-marker"></i> </span>
<span class="txt"> Address: 4578 Marmora Road, Glasgow, D04 89GR </span>
</a>
</li>
<li> <a href="callto:#">
<span> <i class="fa fa-phone"></i> </span>
<span class="txt"> (800) 123-0045 </span>
</a>
</li>
</ul>
</div>
<div class="social_icon">
<ul>
<li><a href=""> <span> <i class="fa fa-facebook"></i> </span> </a></li>
<li><a href=""> <span> <i class="fa fa-twitter"></i> </span> </a></li>
<li><a href=""> <span> <i class="fa fa-google-plus"></i> </span> </a></li>
<li><a href=""> <span> <i class="fa fa-youtube"></i> </span> </a></li>
<li><a href=""> <span> <i class="fa fa-vimeo"></i> </span> </a></li>
<li><a href=""> <span> <i class="fa fa-pinterest"></i> </span> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
<!-- navbar -->
<div class="secondary_navbar">
<nav class="navbar navbar-inverse custom_navbar">
<div class="container">
<div class="collapsible_navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" /> </a>
</div>
<div class="collapse navbar-collapse custom_size" id="myNavbar">
<ul class="nav navbar-nav pull-right ">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">about <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"></a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#"> services</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">pages</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">content</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<!-- end -->
<!-- script -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- !end -->
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:"";
}
body{
font-family: 'Raleway', sans-serif;
}
.container-fluid{
padding-left:0;
padding-right:0;
}
.container{
padding-left:25px;
padding-right:25px;
}
.nav_header{
background:#1a2e50;
min-height:40px;
}
.address_menu{
float:left;
}
.social_icon{
float:right;
}
.address_menu ul li,.social_icon ul li{
display:inline-block;
}
.address_menu ul,.social_icon ul{
margin-bottom:0;
}
.address_menu ul li a span i,.social_icon ul li a span i{
color:#f9b707;
font-size:22px;
}
.address_menu ul li a{
display:block;
margin:0 6px;
}
.address_menu ul li a span,.social_icon ul li a span{
display:inline-block;
vertical-align:middle;
}
.address_menu ul li a span.txt:hover,.social_icon ul li a span i:hover{
color:#f9b707;
}
.social_icon ul li a span i,.address_menu ul li a span i{
transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
}
.social_icon ul li a span i:hover{
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.3);
transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
}
.wrapper{
margin: 13px 0px;
}
.address_menu ul li a span.txt{
color:#fff;
}
.social_icon ul li a span i{
color:#fff;
font-size:17px;
}
.social_icon ul li a span{
margin-left:4px;
margin-right:4px;
}
.secondary_navbar .custom_navbar{
border-radius:0;
background:#272727;
border:none;
}
.navbar{
margin-bottom:0;
}
.navbar-brand{
height:auto;
}
.custom_size ul li a{
text-transform:capitalize;
}
.custom_size > ul{
margin-top:10px;
}
