CSS/Skalowanie

Question

Witam! Dzisiaj zacząłem pisać pewną rzecz.. napotkałem pewien problem. Otóż nie wiem jak mogę zrobić, aby menu sie skalowało wraz z opcjami, gdy zmniejszam okno przeglądarki to tylko zmniejsza mi się tło, ale opcje zostają w miejscu, co wiąże się z tym, że nie można ich kliknąć, bo są schowane. Co powinienem zrobić? Jakie kroki podjąć.

DOŁĄCZAM ZDJĘCIE!

Pozdrawiam!

Answer 1

Używaj vw zamiast px w rozmiarze czcionki https://css-tricks.com/viewport-sized-typography/

Comments

Owszem zastosowałem to, moje opcje zmniejszają się, ale zostają w miejscu, co powoduje brak dostępu do opcji na dole ;/

---

Ewentualnie może być tak, żeby w menu zrobił się suwak.

---

Najlepiej jakbyś kod wkleił.

---

<div class="sidebar-bg">
    <div class="sidebar-wrapper">
        <div class="logo">
            <img src="assets/img/logo2.png" alt="logo">
        </div>
        <nav>
            <ul class="menu">
                <li>
                    <a href="#"><i class="ikonka fas fa-home"></i>Strona główna</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-key"></i>Twoje usługi</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-trophy"></i>Statystyki</a>
                </li>
                <li>
                    <a href="#"><i class="ikonka fas fa-ban"></i>Bany i warny</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">Frakcje</a>
                </li>
                <li>
                    <a href="#">Zmiana hasła</a>
                </li>
                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">ZLorem Ipsum</a>
                </li>
                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <a href="#">Zmiana </a>
                </li>
                <li>
                    <a href="#">Kontakt</a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">Zmiana hasła</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

.sidebar-bg {
    background-image: url(../img/side.png);
    background-position: center;
    background-size: cover;
    width: 260px;
    min-height: 100%;
    height: 100%;
    position: absolute;
}
.sidebar-wrapper {
    overflow: hidden;
    width: 260px;
    min-height: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
}
.logo {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav {
    margin-top: 20px;
}
nav > ul {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
}
nav .menu li a {
    color: #fff;
    text-decoration: none;
    line-height: 30px;
    font-size: 1.6vh;
}
li {
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 900;
}
li:hover {
    background-color: lightgray;
    opacity: 0.3;
}

 

---

do .nav możesz dodać

    line-height: 60%;
    overflow: scroll;

---

Nie działa :"/

---

Dodało scrollbara i zmniejszyło odstępy https://jsfiddle.net/jcryhkzp/

---

Znalazłem błąd. Wystarczyło dodać w klasie .sidebar-wrapper overflow auto i działą wszytko.

Dzięki! Pozdrawiam