Фиксация меню при скроле страницы

Question

Как правильно сделать фиксацию меню, чтобы при скроле оно аккрутно прилеплялось к верху экрана?

Я пробовал несколько способов, но у меня меню постоянно скачет (если добавляю position:fixed элементы слетают) и при скроле вообще может быть под контентом.

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 22px;
    color: #000;
}
.logo {
    margin-top: 15px;
}
.menu__btn {
    display: none;
}
.menu__list-phone {
    display: none;
}
.menu__list {
    display: flex;
}
.menu__list li+li {
    padding-left: 22px;
}

<header class="header">
    <div class="container">
        <div class="header__inner">
            <a class="logo" href="index.html">
                <img src="images/logo.png" alt="логотип проектная компания штрих">
            </a>
            <div class="header__inner-phone">
                <a class="header__phone-link tel-link" href="tel:88129614875">
                    <i class="flaticon-phone-call-1"></i> 8 (812) 961 38 70
                </a>
            </div>

            <nav class="menu">
                <div class="menu-burger__header">
                    <span></span>
                </div>
                <ul class="menu__list">
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="index.html">Главная</a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="about.html">О нас</a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="services.html">Услуги</a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">Проекты</a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="contacts.html">Контакты</a>
                    </li>
                    <li class="menu__list-phone">
                        <a class="header__phone-link tel-link" href="tel:88129614875">
                            <i class="flaticon-phone-call-1"></i> 8 (812) 961 38 70
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>        
</header>

БЛОГ НА HUSL

Фиксация меню при скроле страницы

Ответы (0 шт):