Dzień dobry mam pytanie odnośnie nava takiego jak na stronie. Można rozwinąć menu pojechać w dół strony i on nie jedzie w dół a jak wrócimy dalej jest rozwinięty. Mam taki kod:
<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fontello.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<title>Moja strona</title>
</head>
<body>
<h2 class="logotype">Tytuł strony</h2>
<header class="nav">
<div class="inner-width">
<a href="strona-główna" class="logo"><img src="img/logo.png" alt="logo"></a>
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
<a href="strona-główna"><i class="fas fa-home home"></i>Strona główna</a>
<a href="#"><i class="fas fa-bone suki"></i>#i</a>
<a href="#"><i class="fas fa-dog psy"></i>#</a>
<a href="#"><i class="fas fa-paw mioty"></i>#</a>
<a href="#"><i class="fas fa-book tm"></i>#</a>
<a href="#"><i class="fas fa-envelope con"></i>Kontakt</a>
<a href="home"><img height= "29px" src="img/wb.png" alt="Język angielski"></a>
</nav>
</div>
</header>
<div id="container">
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Open Sans",sans-serif;
box-sizing: border-box;
}
::-webkit-scrollbar
{
width: 0;
}
header.nav{
height: 90px;
background: #0066CC;
}
.inner-width{
max-width: 1000px;
padding: 0 10px;
margin: 0 auto;
}
.logo{
float: left;
padding: 10px 0;
}
.logo img{
height: 75px;
}
.navigation-menu{
float: right;
display: flex;
align-items: center;
min-height: 90px;
}
.navigation-menu a{
margin-left: 5px;
color: #ddd;
text-transform: uppercase;
font-size: 14px;
padding: 12px 10px;
border-radius: 12px;
transition: .3s linear;
}
.navigation-menu a:hover{
background: #fff;
color: #2f3640;
transform: scale(1.05);
}
.navigation-menu i{
margin-right: 8px;
font-size: 16px;
}
.home{
color: #ff6b6b;
}
.suki{
color: #0abde3;
}
.psy{
color: #feca57;
}
.mioty{
color: #5f27cd;
}
.tm{
color: #1dd1a1;
}
.con{
color: #CC6600;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
.sliderek
{
margin-top: 50px;
padding-bottom: 500px;
position: sticky;
}
.menu-toggle-btn{
float: right;
height: 90px;
line-height: 90px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
@media screen and (max-width:1010px) {
.menu-toggle-btn{
display: block !important;
}
.navigation-menu{
position: fixed;
width: 100%;
max-width: 400px;
background: #172b4d;
top: 94px;
right: 0;
display: none;
padding: 20px 40px;
box-sizing: border-box;
}
.navigation-menu::before{
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a{
display: block;
margin: 10px 0;
}
.navigation-menu.active{
display: block;
margin-top: 90px;
z-index: 1;
}
}
body
{
background-color: #3399CC;
}
#container
{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #fff;
}
h2.logotype{
color: #ddd;
text-transform: uppercase;
text-align: center;
letter-spacing: 5px;
font-size: 40px;
padding: 20px 0;
white-space: nowrap;
}
.miotzapowiedz{
color: #fff;
font-size: 44px;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
font-weight: 400;
margin-bottom: 40px;
}
h1{
font-size: 44px;
font-weight: 400;
color: #CCCC33;
margin: 40px 0;
}
p {
color: yellow;
font-size: 20px;
}
.info {
width: 100%;
background-color: #0066CC;
color: white;
text-align: center;
padding: 40px;
margin: 50px 0;
}
a.bluebutton
{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03d6f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
padding: 15px 25px;
}
a.bluebutton:hover
{
animation: animate 8s linear infinite;
}
@keyframes animate {
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
a.bluebutton:before
{
width: 200px;
height: 60px;
content: '';
position: relative;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
filter: blur(20px);
}
.fb
{
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
ul
{
position: relative;
display: flex;
}
ul li
{
position: relative;
list-style: none;
}
ul li a
{
position: relative;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin: 0 10px;
text-decoration: none;
font-size: 30px;
border-radius: 50%;
color: #e2e2e2;
box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),
2px 2px 5px rgba(0,0,0,0.2);
transition: 0.5s;
}
ul li a:hover
{
color: #999;
transform: translateY(-20px);
box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),
2px 24px 10px rgba(0,0,0,0.1);
}
ul li a:before
{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.1);
}
ul li a .icon-facebook
{
color: #fff;
position: relative;
z-index: 1;
}
ul li:nth-child(1) a:before
{
background: #1077f2;
}
.stopka{
color: #fff;
background-color: #0066CC;
text-align: center;
width: 100%;
padding: 15px;
margin-top: 20px;
}
#container a
{
opacity: 0.9;
}
#container a:hover
{
opacity: 1;
}
.molly{
margin-top: 50px;
position: relative;
}
.mio{
color: #fff;
}
.scrollup
{
width: 64px;
height: 64px;
text-decoration: none;
background: url("img/up.png") no-repeat 0px 0px;
position: fixed;
right: 50px;
bottom: 50px;
display: none;
border-radius: 5px;
}
.rodowod{
width: 90%;
}
h2.rasa
{
color: #333300;
}
.responsive
{
max-width:100%;
}
#slider {
overflow: hidden;
margin-top: 40px;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
@media screen and (min-width: 320px) {
h2.logotype {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
.navigation-menu{
top: 62px;
}
}
@media screen and (min-width: 1000px) {
h2.logotype {
font-size: 40px;
}
}
.jezyka
{
height: 29px;
padding: 0;
margin: auto;
}
#scrollPath
{
position: fixed;
top: 0;
right: 0;
width: 15px;
height: 100%;
background: rgba(255, 225, 225, 0.05);
}
#progressbar
{
position: fixed;
top: 0;
right: 0;
width: 15px;
background: linear-gradient(to top, #008aff, #00ffe7);
animation: animate 5s linear infinite;
}
@keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe7);
filter: blur(10px);
}
#progressbar:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe7);
filter: blur(30px);
}
i chciałbym naprawić menu active tak żeby nie odczepiało się od menu i jechało wraz z zjeżdżaniem na dół strony
tak jak jest na tym forum