Can't make navbar fixed with sticky position CSS
2
I've been struggling quite a bit with this issue. I've made a navbar with two dropdowns and animations. What I want to do now, is to make it fixed, whenever one scrolls X pixels (I've sat it to 5px in my code). Basically when you scroll past the content above the navbar, it should be fixed.
I have a nav tag with the entire navbar, on which I've added the CSS (in the attempt to make it sticky):
position:sticky;
position:-webkit-sticky;
top:5px;
I have read a lot of other posts about the issue, but can't seem to find any of the mentioned issues in my code..
What I have checked for / tried:
- Navbar is not inside the header element
- Overflow not hidden on containing elements
- Changing display:flex; on parent
- Element does not get styling after the animation: animation-fill-mode:none;
I know this can also be done with Javascript, but I really want to make it work by just using CSS.
I would really appreciate any help!
My Code:
*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>EDIT: Spelling...
html css sticky
edited Nov 20 '18 at 4:30
KeZ
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
add a comment |
2
I've been struggling quite a bit with this issue. I've made a navbar with two dropdowns and animations. What I want to do now, is to make it fixed, whenever one scrolls X pixels (I've sat it to 5px in my code). Basically when you scroll past the content above the navbar, it should be fixed.
I have a nav tag with the entire navbar, on which I've added the CSS (in the attempt to make it sticky):
position:sticky;
position:-webkit-sticky;
top:5px;
I have read a lot of other posts about the issue, but can't seem to find any of the mentioned issues in my code..
What I have checked for / tried:
- Navbar is not inside the header element
- Overflow not hidden on containing elements
- Changing display:flex; on parent
- Element does not get styling after the animation: animation-fill-mode:none;
I know this can also be done with Javascript, but I really want to make it work by just using CSS.
I would really appreciate any help!
My Code:
*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>EDIT: Spelling...
html css sticky
edited Nov 20 '18 at 4:30
KeZ
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22
add a comment |
2
2
2
1
I've been struggling quite a bit with this issue. I've made a navbar with two dropdowns and animations. What I want to do now, is to make it fixed, whenever one scrolls X pixels (I've sat it to 5px in my code). Basically when you scroll past the content above the navbar, it should be fixed.
I have a nav tag with the entire navbar, on which I've added the CSS (in the attempt to make it sticky):
position:sticky;
position:-webkit-sticky;
top:5px;
I have read a lot of other posts about the issue, but can't seem to find any of the mentioned issues in my code..
What I have checked for / tried:
- Navbar is not inside the header element
- Overflow not hidden on containing elements
- Changing display:flex; on parent
- Element does not get styling after the animation: animation-fill-mode:none;
I know this can also be done with Javascript, but I really want to make it work by just using CSS.
I would really appreciate any help!
My Code:
*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>EDIT: Spelling...
html css sticky
edited Nov 20 '18 at 4:30
KeZ
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
I've been struggling quite a bit with this issue. I've made a navbar with two dropdowns and animations. What I want to do now, is to make it fixed, whenever one scrolls X pixels (I've sat it to 5px in my code). Basically when you scroll past the content above the navbar, it should be fixed.
I have a nav tag with the entire navbar, on which I've added the CSS (in the attempt to make it sticky):
position:sticky;
position:-webkit-sticky;
top:5px;
I have read a lot of other posts about the issue, but can't seem to find any of the mentioned issues in my code..
What I have checked for / tried:
- Navbar is not inside the header element
- Overflow not hidden on containing elements
- Changing display:flex; on parent
- Element does not get styling after the animation: animation-fill-mode:none;
I know this can also be done with Javascript, but I really want to make it work by just using CSS.
I would really appreciate any help!
My Code:
*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>EDIT: Spelling...
*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>*{
margin:0;
padding:0;
}
body {
margin-bottom:3000px; /*add scrolling to page*/
}
p {
display: block;
}
.nav-container {
/*sticky part---------------------*/
position:sticky;
position: -webkit-sticky;
top:5px;
animation-name: navbar-animation;
animation-duration: 1s;
animation-fill-mode: none;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
/*WEBKIT*/
-webkit-animation-name: navbar-animation;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
@keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes navbar-animation {
0% {
transform: translate(0, -60px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.navbar {
background-color: #BABABA;
display:flex;
float:left;
width:100%;
height: 55px;
position:relative;
flex-wrap:nowrap;
min-width: 500px;
box-shadow: 0px 2px 5px #7A7A7A;
z-index:-2;
justify-content:center;
}
.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
list-style:none;
}
.navbar-item {
display:flex;
align-items:center;
font-family: 'Roboto Mono', monospace, Helvetica;
font-size:17px;
}
.navbar-item a {
display:inline-block;
padding: 16px 15px;
}
.navbar-item a:hover {
color:white;
}
.navbar-item:hover {
background-color:grey;
}
.dropdown-menu {
display: none;
list-style:none;
position:absolute;
background-color: #f3f3f3;
width: 140px;
border-radius: 0px 0px 5px 5px;
top:56px;
box-shadow: 0px 1px 5px grey;
animation-name: dropdown-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes dropdown-menu-animation {
0% {
transform: translate(0, -5px);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.dropdown-menu-item {
display:block;
}
.dropdown-menu-item:hover {
background-color: grey;
}
.dropdown-menu-item a {
display: block;
width: 100%;
padding-left:15px;
}
a, a:visited {
text-decoration: none;
color:black;
}
#dropdown-toggle-hover:hover .dropdown-menu{
display:block;
}
.dropdown-sub1-menu {
display:none;
position: absolute;
left:139px;
top: -0px;
background-color:#f3f3f3;
width: 158px;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 1px 5px grey;
z-index: -1;
animation-name: dropdown-sub1-menu-animation;
animation-iteration-count: 1;
animation-duration: 120ms;
animation-fill-mode: none;
animation-timing-function: linear;
animation-direction: normal;
/*Chrome/Safari*/
-webkit-animation-name: dropdown-sub1-menu-animation;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 120ms;
-webkit-animation-fill-mode: none;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
}
@keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
@-webkit-keyframes dropdown-sub1-menu-animation {
0% {
transform: translate(-3px, 0);
opacity:1;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
.dropdown-sub1-menu-item {
display:block;
}
.dropdown-sub1-menu-item:hover {
background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
display:block;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Lund</title>
</head>
<header>
<div>
<p>Something here</p>
</div>
</header>
<body>
<nav class="nav-container">
<ul class="navbar">
<li class="navbar-item"><a href="#">Home</a></li>
<li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
<ul class="dropdown-sub1-menu">
<li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
<li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
</ul>
</li>
<li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
<li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
</ul></li>
<li class="navbar-item"><a href="#">About Me</a></li>
<li class="navbar-item"><a href="#">CV</a></li>
</ul>
</nav>
<main>
</main>
</body>
<script src="./scripts/scripts.js"></script>
</html>html css sticky
html css sticky
edited Nov 20 '18 at 4:30
KeZ
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
edited Nov 20 '18 at 4:30
KeZ
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
edited Nov 20 '18 at 4:30
KeZ
2014
edited Nov 20 '18 at 4:30
KeZ
2014
edited Nov 20 '18 at 4:30
KeZ
2014
2014
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
asked Nov 19 '18 at 20:56
LeeSwaggersLeeSwaggers
132
132
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22
add a comment |
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22
add a comment |
1 Answer
1
active
oldest
votes
3
Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:
body {
margin-bottom:3000px; /*add scrolling to page*/
}
Replace margin with actual height
body {
height:3000px; /*add scrolling to page*/
}
And the position:sticky works.
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382513%2fcant-make-navbar-fixed-with-sticky-position-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:
body {
margin-bottom:3000px; /*add scrolling to page*/
}
Replace margin with actual height
body {
height:3000px; /*add scrolling to page*/
}
And the position:sticky works.
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
add a comment |
3
Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:
body {
margin-bottom:3000px; /*add scrolling to page*/
}
Replace margin with actual height
body {
height:3000px; /*add scrolling to page*/
}
And the position:sticky works.
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
add a comment |
3
3
3
Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:
body {
margin-bottom:3000px; /*add scrolling to page*/
}
Replace margin with actual height
body {
height:3000px; /*add scrolling to page*/
}
And the position:sticky works.
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
Based on the CSS/HTML you've provided, the issue seems to be this CSS rule:
body {
margin-bottom:3000px; /*add scrolling to page*/
}
Replace margin with actual height
body {
height:3000px; /*add scrolling to page*/
}
And the position:sticky works.
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 22:12
jeanpaulxiaojeanpaulxiao
1635
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
add a comment |
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
1
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 '18 at 16:03
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382513%2fcant-make-navbar-fixed-with-sticky-position-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I would recommend leveraging a library that handles this. That way, it will render consistently across various browsers and devices. The more modern CSS methods are not cross browser friendly.
– Alexander Dixon
Nov 19 '18 at 22:52
Can you maybe expand on this? I'm not sure I fully understand, still fairly new to programming. I've used flags to make sure it works across supported browsers for now, but I've removed most of them to make it reader friendly in the post.
– LeeSwaggers
Nov 20 '18 at 5:22