Can't make navbar fixed with sticky position CSS
up vote
2
down vote
favorite
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 at 4:30
KeZ
204
asked Nov 19 at 20:56
LeeSwaggers
132
add a comment |
up vote
2
down vote
favorite
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 at 4:30
KeZ
204
asked Nov 19 at 20:56
LeeSwaggers
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 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 at 5:22
add a comment |
up vote
2
down vote
favorite
1
up vote
2
down vote
favorite
1
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 at 4:30
KeZ
204
asked Nov 19 at 20:56
LeeSwaggers
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 at 4:30
KeZ
204
asked Nov 19 at 20:56
LeeSwaggers
132
edited Nov 20 at 4:30
KeZ
204
asked Nov 19 at 20:56
LeeSwaggers
132
edited Nov 20 at 4:30
KeZ
204
edited Nov 20 at 4:30
KeZ
204
edited Nov 20 at 4:30
KeZ
204
204
asked Nov 19 at 20:56
LeeSwaggers
132
asked Nov 19 at 20:56
LeeSwaggers
132
asked Nov 19 at 20:56
LeeSwaggers
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 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 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 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 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 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 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 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 at 5:22
add a comment |
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
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 at 22:12
jeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 at 16:03
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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 at 22:12
jeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 at 16:03
add a comment |
up vote
3
down vote
accepted
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 at 22:12
jeanpaulxiao
1635
1
I didn't even consider this! But you're right, it works like a charm! Thank you! much appreciated!
– LeeSwaggers
Nov 20 at 16:03
add a comment |
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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 at 22:12
jeanpaulxiao
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 at 22:12
jeanpaulxiao
1635
answered Nov 19 at 22:12
jeanpaulxiao
1635
answered Nov 19 at 22:12
jeanpaulxiao
1635
answered Nov 19 at 22:12
jeanpaulxiao
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 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 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 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 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 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 at 5:22