How to Create a Sticky Navbar
How to » How to Create a Sticky Navbar
Study in this chapter:
1. - How can I make my navbar sticky?
2. - sticky navbar without javascript
3. - sticky navbar with javascript
To create a sticky navigation bar on top, use position: fixed; CSS style property to "stick" the navigation bar (navbar) to the viewport, and position: sticky; to make it stick to its parent element.
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
Sticky navbar without javascript
Sticky navbar without javascript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Poppins:wght@300&display=swap');body {
font-family: poppins, sans-serif;
margin: 0px;
}nav {
background-color: #3a24f0;
padding: 10px;
text-align: center;
width: 100%;
position: sticky;
top: 0px;
}nav a {
color: white;
text-decoration: none;
margin: 0px 20px;
font-size: 1.3em;
}nav a:hover {
text-decoration: underline;
}section {
min-height: 100vh;
}section#header {
background: rgb(123,134,232);
background: linear-gradient(164deg, rgba(123,134,232,1) 0%, rgba(246,140,255,1) 52%, rgba(255,222,50,1) 100%);
color: #270942;
min-height: 30vh;
}section#tim-vine {
background: rgb(123,211,232);
background: linear-gradient(135deg, rgba(123,211,232,1) 0%, rgba(123,211,232,1) 0%, rgba(50,171,255,1) 100%);
color: #0f2852;
}section#bill-hicks {
background: rgb(123,211,232);
background: linear-gradient(135deg, rgba(123,211,232,1) 0%, rgba(232,123,165,1) 0%, rgba(255,50,50,1) 100%);
color: #40081a;
}section#stewart-francis {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 50%, #ffffff 100%);
color: #084012;
}article {
width: 90%;
max-width: 600px;
padding: 20px;
margin: 0px auto;
}h2 {
text-align: center;
padding: 40px 0px 0px 0px;
font-size: 3em;
}p {
font-size: 1.5em;
text-align: center;
}
@media
(prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}@media screen and (max-width: 800px) {
body {
font-size: 14px;
}
}@media screen and (max-width: 600px) {
body {
font-size: 11px;
}
}
</style>
</head>
<body><section id="header">
<article>
<h2>Let's read some jokes!</h2>
</article>
</section>
<nav>
<a href="#header">Home</a>
<a href="#tim-vine">Sevices</a>
<a href="#bill-hicks">News</a>
<a href="#stewart-francis">Products</a>
</nav>
<section id="tim-vine"><article>
<strong>What is Lorem Ipsum?</strong><br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem
Ipsum.<br /><br />Why do we use it?<br />
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.
Many desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected
humour and the like).
</article>
</section>
<section id="bill-hicks">
<article>
<h2>Bill Hicks</h2>
<p>I need my sleep. I need about eight hours a day,
and about ten at night.</p>
<p>I don't mean to sound bitter, cold, or cruel,
but I am, so that's how it comes out.</p>
<p>I never got along with my dad. Kids used to come
up to me and say, "My dad can beat up your dad."
I'd say "Yeah? When?"</p>
</article>
</section>
<section id="stewart-francis">
<article>
<h2>Stewart Francis</h2>
<p>There’s a fine line between hyphenated words.</p>
<p>I used to be in a band called ‘Missing Cat’… you probably saw our posters.</p>
<p>Have you ever imagined a world with no hypothetical situations?</p>
<p>I was going to join the debating team, but somebody talked me out of it.</p>
</article>
</section></body>
</html>
Related subjects:
HTML Table Style
HTML Table Color
Table HTM
Sticky navbar using javascript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 98%;
}.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}#navbar {
overflow: hidden;
background-color: #333;
}#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}#navbar a:hover {
background-color: #ddd;
color: black;
}#navbar a.active {
background-color: #04AA6D;
color: white;
}.content {
padding: 16px;
background-color: #EEE;
}.sticky {
position: fixed;
top: 0;
width: 100%;
}.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body><div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div><div id="navbar">
<a class="active" href="javascript:void(0)">Home</a>
<a href="javascript:void(0)">Products</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Services</a>
<a href="javascript:void(0)">Contact</a>
</div><div class="content">
<h3>Sticky Navigation Example</h3>
<strong>What is Lorem Ipsum?</strong><br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><strong>Why do we use it?</strong><br />
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still
in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour
and the like).<br /><br />
<strong>Where does it come from?</strong><br />
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more
obscure Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical literature,
discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory
of ethics, very popular during the Renaissance. The first
line of Lorem Ipsum, "Lorem ipsum dolor sit amet.
.", comes from a line in section 1.10.32.<br /><br />The standard chunk of Lorem Ipsum used since the 1500s is reproduced
below for those interested. Sections 1.10.32 and 1.10.33 from "de
Finibus Bonorum et Malorum" by Cicero are also reproduced in
their exact original form, accompanied by English versions from
the 1914 translation by H. Rackham.<br /><br /><strong>Where can I get some?</strong><br /><br />
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be
sure there isn't anything embarrassing hidden in the middle of
text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first
true generator on the Internet. It uses a dictionary of over
200 Latin words, combined with a handful of model sentence
structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
<strong>Where does it come from?</strong><br />
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more
obscure Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical literature
, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory
of ethics, very popular during the Renaissance. The first
line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32.<br /><br />The standard chunk of Lorem Ipsum used since the 1500s is
reproduced below for those interested. Sections 1.10.32 and
1.10.33 from "de Finibus Bonorum et Malorum" by Cicero
are also reproduced in their exact original form, accompanied by
English versions from the 1914 translation by H. Rackham.<br
/><br /><strong>Where can I get some?</strong><br
/><br />
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by
injected humour, or randomised words which don't look even
slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything
embarrassing hidden in the middle of text. All the Lorem
Ipsum generators on the Internet tend to repeat predefined
chunks as necessary, making this the first true generator
on the Internet. It uses a dictionary of over 200 Latin
words, combined with a handful of model sentence structures,
to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words etc.
</div><script>
window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script></body>
</html>
Tags: sticky navbar examples, react-sticky navbar, navbar html css, with and without javascript
Navigation bar
How to create a sticky Navigation bar with only CSS?
Summary of description
sticky navbar examples, react-sticky navbar, navbar html css, with and without javascript
Create a Sticky Navbar with and without JavaScript - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.