Menu
This supposed to be a sticky navigation bar but never gets sticky. I've read that I must use align-self: flex-start; to fix this issue with flex but lamentably does not do it.
body { padding-bottom: 2000px;}
ul { list-style: none;}
.wrap {
position: sticky;
position: -webkit-sticky;
top: 0;
align-self: flex-start;
}
.nav-bar {
display: flex;
flex-direction: row;
justify-content: flex-end;
background-color: #00aae4;
margin-bottom: 0;
padding-right: 30px;
height: 50px;
margin-top:0;
}
.nav-link {
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
width: 100px;
text-align: center;
font-size: 20px;
margin-top: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="wrap">
<ul class="nav-bar">
<li class="nav-link">Luigis</li>
<li class="nav-link">Menu</li>
<li class="nav-link">Acerca de </li>
<li class="nav-link">Contacto</li>
</ul>
</nav>
</body>
</html>I've tried changing the align-self property location into the ul's settings and made use of top. Also tried to eliminate the list by just using div with clases but still no result.
530
asked Dec 07 '25 09:12
From the specification:
Intersection between the stickily positioned element and the bottom of the sticky-constraint rectangle limits movement in any direction, so the offset never pushes the stickily positioned element outside of its containing block. However, when the element is free to move within its containing block as the page is scrolled, it appears to be pinned to the relevant flow root edges, similarly to a fixed position element.
By default, your element is contained in the content-box and not the padding-box and in your case the content-box is defined by the sticky element so there is no sticky behavior if you add a big padding.
You can have a sticky behavior if you add a big height to increase the content-box.
body {
height: 2000px;
}
ul {
list-style: none;
}
.wrap {
position: sticky;
position: -webkit-sticky;
top: 0;
}
.nav-bar {
display: flex;
flex-direction: row;
justify-content: flex-end;
background-color: #00aae4;
margin-bottom: 0;
padding-right: 30px;
height: 50px;
margin-top: 0;
}
.nav-link {
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
width: 100px;
text-align: center;
font-size: 20px;
margin-top: 5px;
}<nav class="wrap">
<ul class="nav-bar">
<li class="nav-link">Luigis</li>
<li class="nav-link">Menu</li>
<li class="nav-link">Acerca de </li>
<li class="nav-link">Contacto</li>
</ul>
</nav>
- For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. ref
You are probably confusing with the containing block of an absolute positioned element that is the padding box:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
- In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
- Otherwise, the containing block is formed by the padding edge of the ancestor.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
