<html>
<head>
<title>Sticky NavBar</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum volutpat vulputate. Nam maximus neque sit amet nunc sagittis dictum tempus sit amet ipsum. Duis pharetra sodales purus, quis tempus ligula dictum non. Etiam iaculis metus vitae turpis posuere, ac dignissim neque porttitor. Mauris pulvinar hendrerit est, ut eleifend enim porta at. Ut convallis erat massa, nec dapibus mi auctor eu. Nam quis aliquet lectus. Nullam non accumsan lacus. Sed consequat tortor nunc, id blandit massa aliquam quis. Morbi erat felis, laoreet et elit sit amet, gravida ultricies augue. Aliquam vitae tortor ut felis eleifend euismod. Pellentesque nec quam augue. Pellentesque posuere ipsum quis condimentum posuere. Donec eu fringilla arcu, ac facilisis erat.</p>
<p>Duis dictum sit amet eros et placerat. Mauris ultricies semper mauris, in accumsan urna elementum non. Maecenas turpis risus, tincidunt vel porttitor ac, maximus ac est. Phasellus egestas fringilla placerat. Etiam tempor ante eget leo faucibus convallis. Phasellus malesuada libero nec erat ultricies, in malesuada risus finibus. Nam sit amet neque a nisl vulputate luctus a a lectus. Duis nisi ligula, luctus et tortor id, semper ultricies magna. Mauris ut lectus tellus. Ut euismod libero scelerisque, pulvinar nisl elementum, tincidunt erat.</p>
<p>Proin non magna tristique, feugiat sapien sit amet, sollicitudin diam. Aliquam erat volutpat. Sed tortor odio, pellentesque et eleifend et, vulputate quis elit. Duis quis tincidunt nisi, eu dignissim leo. Cras nibh lectus, rutrum porta lectus sed, imperdiet tincidunt eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nisl tellus, ornare pellentesque lectus sit amet, dapibus pharetra neque.</p>
</div>
</div>
<script type="text/javascript">
//Menu toggle-effect
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
//Scrolling Effect
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black')
}
});
</script>
</body>
</html>
html, body {
margin:0;
padding:0;
width:100%;
min-width:25%;
}
body {
font-family:Poppins;
}
header {
width:100%;
height:100vh;
background: url(https://www.dailyscandinavian.com/wp-content/uploads/2020/11/8884-lofoten.info_.jpeg) no-repeat 50% 50%;
background-size:cover;
}
.content {
width:90%;
margin:4em auto;
font-size:20px;
line-height:30px;
text-align:justify;
}
.logo {
position:fixed;
float:left;
margin:16px 36px;
color:#fff;
font-weight: bold;
font-size:24px;
}
nav {
position:fixed;
width:100%;
}
nav ul {
list-style:none;
background: rgba(0,0,0,0);
overflow:hidden;
color:#fff;
padding:0;
text-align:center;
margin:0;
transition: 1s;
}
nav.black ul {
background:#000;
}
nav ul li {
display:inline-block;
padding:20px;
}
nav ul li a {
text-decoration:none;
color:#fff;
font-size:20px;
}
.menu-icon {
width:100%;
background:#000;
text-align:right;
box-sizing:border-box;
padding:15px 40px;
color:#fff;
display:none;
}
@media(max-width:580px) {
.logo {
position:fixed;
top:0;
margin-top:16px;
}
nav ul {
max-height:0px;
background:#000;
}
nav.black ul {
background:#000;
}
.showing {
max-height:20em;
}
nav ul li {
box-sizing:border-box;
width:100%;
padding:24px;
text-align: center;
}
.menu-icon {
display:block;
}
}
//Menu toggle-effect
$(document).ready(function(){
$(".menu-icon").on("click",function(){
$("nav ul").toggleClass("showing");
});
});
//Scrolling Effect
$(window).on('scroll', function(){
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else{
$('nav').removeClass('black')
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.