Witam. Mam pewien problem. Mianowicie position: sticky nie działa. Za wszelkie rady dziękuje.
body
{
margin: 0;
background-color: #2F3336;
color: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
h1.logo
{
font-size: 44px;
font-weight: 700;
color: #ddd;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;
margin-bottom: 40px;
}
.nav
{
width: 100%;
background-color: #673c9b;
text-align: center;
padding: 10px 0;
border-top: 1px solid #451a79;
border-bottom: 1px solid #451a79;
margin-bottom: 50px;
position: sticky;
position: -webkit-sticky;
top: 0;
}
ul
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ul a
{
color: #ffffff;
text-decoration: none;
display: block;
}
ul > li
{
float: left;
width: 150px;
height: 40px;
border-right: 3px dashed #451a79;
}
ul > li:first-child
{
border-left: 3px dashed #451a79;
}
ul > li:hover > a
{
color: #321e49;
}
#content
{
width: 1000px;
background-color: #454a4f;
color: #ffffff;
margin-right: auto;
margin-left: auto;
font-size: 20px;
margin-top: 30px;
}
<header>
<h1 class="logo">Kosmiczne Bobry Wiki</h1>
<nav class="nav">
<ul class="menu">
<li><a href="#" >Start</a></li>
<li><a href="#" >Książki</a></li>
<li><a href="#" >Forum</a></li>
<li><a href="#" >Wspomóż Nas</a></li>
<li><a href="#" >Kontakt</a></li>
<li><a href="#" >Informacje</a></li>
</ul>
</header>