Scribd
Upload
10 views3 pages

Sticky Nav Bar

This document is an HTML template for a webpage featuring a sticky navigation bar. The header contains a logo and navigation links, which change style when the user scrolls down the page. The page also includes a full-height banner section with a background color.

Uploaded by

akim92320
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views3 pages

Sticky Nav Bar

This document is an HTML template for a webpage featuring a sticky navigation bar. The header contains a logo and navigation links, which change style when the user scrolls down the page. The page also includes a full-height banner section with a background color.

Uploaded by

akim92320
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky navigation bar | ivie estrada</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins' sans-serif;
}
body
{
background: #000;
min-height: 200vh ;
}
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky
{
padding: 5px 100px;
background:pink;
}
header .logo
{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6;
height;15px;
}
header ul
{
position: relative;
display: flex;
justify-content: center;
align-items: center;

}
header ul li
{
position: relative;
list-style: none;
}
header ul li a
{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner
{
position: relative;
width: 100%;
height: 100vh;
background: rgb(168, 115, 175) ;
background-size: cover;
}
header.sticky .logo
header.sticky ul li a
{
color: #000;
}
</style>

</head>
<body>
<header>
<a href="#" class="logo">logo</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">team</a></li>
<li><a href="#">contact</a></li>
</ul>
</header>
<header class="sticky"></header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
</html>

You might also like