<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header class="header fixed">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light rounded ord">
<a class="close-element" href="#"><img class="header__logo" src="https://picsum.photos/300/150?random" alt="Logo"></a>
<button class="navbar-toggler toggle-hamburger toggle-hamburger__animx" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav ml-auto justify-content-around flex-row mt-3">
<li class="nav-item">
<a class="nav-link close-element" href="#">Files <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item close-element">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<ul class="navbar-nav ml-auto flex-row">
<form class="scroll-form">
<input type="text" placeholder="Search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<li class="nav-item">
<a class="nav-link active pr-1" href="#">En</a>
</li>
<li class="nav-item">
<span class="nav-link px-0">|</span>
</li>
<li class="nav-item">
<a class="nav-link pl-1" href="#">De</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light rounded">
<div class="collapse navbar-collapse justify-content-between" id="navbarsExample09">
<ul class="navbar-nav text-center">
<li class="nav-item pr-3 show-element"> <a href="#"><img src="https://picsum.photos/100/40?random" alt=""></a></li>
<li class="nav-item active border-md-top">
<a class="nav-link pl-0" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item border-top">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item border-top">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item border-top">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0 close-element">
<input class="form-control flex-md-fill flex-sm-fill mr-1" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-search"><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
</div>
</header>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque odio laudantium error quas dicta non atque itaque beatae, enim libero, facere neque, quibusdam distinctio consectetur eveniet! Aut, aperiam eaque quo consequatur rem dolore! Dolorem aperiam perferendis ratione placeat rem! Accusantium esse sunt deserunt corrupti veniam a architecto dolorem? Animi dicta modi illum distinctio odit voluptatum, aspernatur quo explicabo officia necessitatibus, fuga molestiae, cum est aliquid reiciendis consectetur nesciunt a delectus. Molestiae eius eum labore beatae quae facilis? Sed placeat consequuntur culpa temporibus illum earum numquam tempora, repudiandae modi? Praesentium consectetur sint impedit mollitia, illo fugit veniam quis magnam ea ratione!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque odio laudantium error quas dicta non atque itaque beatae, enim libero, facere neque, quibusdam distinctio consectetur eveniet! Aut, aperiam eaque quo consequatur rem dolore! Dolorem aperiam perferendis ratione placeat rem! Accusantium esse sunt deserunt corrupti veniam a architecto dolorem? Animi dicta modi illum distinctio odit voluptatum, aspernatur quo explicabo officia necessitatibus, fuga molestiae, cum est aliquid reiciendis consectetur nesciunt a delectus. Molestiae eius eum labore beatae quae facilis? Sed placeat consequuntur culpa temporibus illum earum numquam tempora, repudiandae modi? Praesentium consectetur sint impedit mollitia, illo fugit veniam quis magnam ea ratione!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque odio laudantium error quas dicta non atque itaque beatae, enim libero, facere neque, quibusdam distinctio consectetur eveniet! Aut, aperiam eaque quo consequatur rem dolore! Dolorem aperiam perferendis ratione placeat rem! Accusantium esse sunt deserunt corrupti veniam a architecto dolorem? Animi dicta modi illum distinctio odit voluptatum, aspernatur quo explicabo officia necessitatibus, fuga molestiae, cum est aliquid reiciendis consectetur nesciunt a delectus. Molestiae eius eum labore beatae quae facilis? Sed placeat consequuntur culpa temporibus illum earum numquam tempora, repudiandae modi? Praesentium consectetur sint impedit mollitia, illo fugit veniam quis magnam ea ratione!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque odio laudantium error quas dicta non atque itaque beatae, enim libero, facere neque, quibusdam distinctio consectetur eveniet! Aut, aperiam eaque quo consequatur rem dolore! Dolorem aperiam perferendis ratione placeat rem! Accusantium esse sunt deserunt corrupti veniam a architecto dolorem? Animi dicta modi illum distinctio odit voluptatum, aspernatur quo explicabo officia necessitatibus, fuga molestiae, cum est aliquid reiciendis consectetur nesciunt a delectus. Molestiae eius eum labore beatae quae facilis? Sed placeat consequuntur culpa temporibus illum earum numquam tempora, repudiandae modi? Praesentium consectetur sint impedit mollitia, illo fugit veniam quis magnam ea ratione!</p>
<script
src="http://code.jquery.com/jquery-3.4.0.js"
integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
crossorigin="anonymous"></script>.header {
width: 100%;
margin-bottom: 50px;
.header__logo {
max-width: 200px;
}
&__links li {
margin-left: 40px;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
color: #0070b2;
}
.btn-search {
position: absolute;
right: 25px;
}
&.fixedNav {
height: 100px;
position: fixed;
top: 0;
left: 0;
background: #fffdfdeb;
z-index: 30;
color: #e6e4e4d4;
align-items: center;
display: flex;
.container {
display: flex;
justify-content: space-around;
.ord {
order: 2;
ul {
margin: 0 !important;
}
}
}
}
.closeElement,
.show-element,
.btnSearch {
display: none;
}
.showElement {
display: block;
}
.scroll-form {
position: relative;
width: 300px;
margin: 0 auto;
height: 42px;
display: none;
input {
height: 42px;
width: 0;
padding: 0 42px 0 15px;
border: none;
border-bottom: 2px solid transparent;
outline: none;
background: transparent;
transition: .4s cubic-bezier(0, 0.8, 0, 1);
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
}
input:focus {
width: 300px;
z-index: 1;
border: 1px solid #ced4da;
border-radius: .25rem;
}
button {
border: none;
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
background: inherit;
}
}
.scrollForm {
display: block;
}
}
$(window).scroll( function(){
if( $(window).scrollTop() > 100 ) {
$('.fixed').addClass('fixedNav');
$('.close-element').addClass('closeElement');
$('.show-element').addClass('showElement');
$('.btn-search').addClass('btnSearch');
$('.scroll-form').addClass('scrollForm');
} else {
$('.fixed').removeClass('fixedNav');
$('.close-element').removeClass('closeElement');
$('.show-element').removeClass('showElement');
$('.btn-search').removeClass('btnSearch');
$('.scroll-form').removeClass('scrollForm');
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.