Хочу, чтобы при прокрутке оставался только header__nav, а логотип скрывался. position: stiky почему-то не работает
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="shapka.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<header class="col-12 d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center">
<div class="header__padding d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center col-xxl-9 col-xl-9 col-lg-10 col-md-11 col-11">
<div class="header__img order-1 col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 d-flex justify-content-left">
<img class=""src="картинка.png" alt="Логотип">
</div>
<div class="header__nav col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 order-2 d-xxl-flex d-xl-flex d-lg-flex d-md-flex d-none">
<nav class="d-flex col-12">
<button class="btn col-4 header__navlink">проекты</button>
<button class="btn col-4 header__navlink">новости</button>
<button class="btn col-4 header__navlink">компания</button>
</nav>
</div>
<div class="header__navMenu d-xxl-none d-xl-none d-lg-none d-md-none d-flex" style="width: 100vw;">
<button class="btn btn-outline-light col-12" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Меню
</button>
</div>
</div>
<!-- <div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div> -->
</header>
<div class="content bg-dark col-12" style="height: 150vh;">
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap');
body{
padding: 0;
margin: 0;
color: white;
font-family: 'Montserrat', sans-serif !important;
}
header{
background: linear-gradient(269deg, #181818 0%, #232323 100%);
min-height: 10px;
/* position: fixed; */
z-index: 999;
max-width: 100vw;
}
.header__img{
vertical-align: middle;
padding-top: 1%;
}
img{
object-fit: cover;
width: 250px;
height: 100px;
margin: 0;
}
.header__nav{
position: sticky ;
top: 0;
}
.header__navlink{
border-radius: 0 !important;
border-bottom: 16px;
height: 130px !important;
margin-right: 5%;
max-width: 33.333%;
display: inline-block;
color: rgb(199, 199, 199) !important;
letter-spacing: 3px;
font-weight: 700 !important;
font-size: 35px !important;
transition:1s all;
}
.header__navlink:hover{
background-color: rgb(52, 52, 52) !important;
color: #dddddd;
display: inline-block;
}
ul,li{
list-style-type: none;
}
