<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header id="mainHeader" class="header">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="container">
<a class="navbar-brand" href="#welcomeArea">
Company LOGO
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#bio">My Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#specilizing">Specilizing In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skill">Skils</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#wprocess">Process</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#review">Testimonials </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</header>
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0)
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
.support-bar-area {
display: none;
}
header.header {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
padding: 23px 0px 23px;
background: rgba(255, 255, 255, 0.10);
border-bottom: 1px solid #f5f5f5;
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-light .navbar-toggler:focus {
outline: 0px;
}
#mainHeader .navbar-brand {
color: #fff;
font-weight: 700;
font-size: 30px;
-webkit-background-image: linear-gradient(to right, #f4637c, #b439a9);
-moz-background-image: linear-gradient(to right, #f4637c, #b439a9);
background-image: linear-gradient(to right, #f4637c, #b439a9);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
#mainHeader .navbar-brand span {
color: #ffa614;
text-transform: uppercase;
}
#mainHeader.header.stiky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background: #fff;
border-bottom: 0px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
#mainHeader.header .nav-link {
color: #4d516e;
font-size: 14px;
margin-right: 10px;
font-weight: 600;
position: relative;
}
#mainHeader.header .nav-link::before{
position: absolute;
content: " ";
height: 2px;
width: 0%;
top: 50%;
left: 0px;
transform: translateY(-50%);
-webkit-background-image: linear-gradient(to right, #f4637c, #b439a9);
-moz-background-image: linear-gradient(to right, #f4637c, #b439a9);
background-image: linear-gradient(to right, #f4637c, #b439a9);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#mainHeader.header .nav-link.active::before {
width: 100%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#mainHeader.header .nav-link:hover::before {
width: 100%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#mainHeader.header .nav-item:last-child .nav-link {
margin-right: 0px;
padding-right: 0px;
}
.navbar-light .navbar-toggler {
border: 0px;
}
@media (max-width: 991.98px) {
.navbar-nav {
padding-top: 13px;
padding-left: 30px;
}
#mainHeader.header .nav-link {
display: inline-block;
}
#mainHeader.header .nav-link::before {
top: 50%;
}
}
