Как спозиционировать фиксированный элемент, чтобы он не уезжал при уменьшении размера экрана?

Question

[Norum]

У меня есть вертикальное меню навигации .navbar в виде белых кружков. Как сделать так, чтобы этот блок прилегал к краю .wrapper-а (или хотя бы держался на краю) и никуда не уезжал при уменьшении экрана, несмотря на то, что он имеет свойство position: fixed? Или же единственный выход это каждый раз двигать его приблизительно к краю .wrapper-а через медиа-запросы?

Весь код https://jsfiddle.net/dut2v5ws/

Сам сайт ilyin1ib.beget.tech

<nav class="navbar">
            <ul>
                <li>
                    <a href="#main" class="dot active" data-scroll="main">
                        <span>Главная</span>
                    </a>
                </li>
                <li>
                    <a href="#about_us" class="dot" data-scroll="about_us">
                        <span>О нас</span>
                    </a>
                </li>
            </ul>
        </nav>

.navbar {
    position: fixed;
    top: 50%;
    right: 110px;
    transform: translateY(-50%);
    z-index: 1000;
}

Comments

[Andrei Alisenok]

Norum да, медиа

Answer 1

[Stalker_RED]

Вместо right: 110px укажите позицию в процентах или 5vw, например.