Navbar z logiem na flexbox

pytanie zadane 11 maja 2020 w HTML i CSS przez Mateusz450 Początkujący (380 p.)

Cześć, dowiedziałem się, że lepszym na dzień dzisiejszy od float jest rozmieszczanie bloków na fleksie. Jaki jest najprostszy sposób żeby cały nav razem z logiem był w rzędzie po lewej logo, menu obok?. Oczywiście udało mi się to zrobić, ale efekt nie był w pełni zachwycający po zminimalizowaniu okna do najmniejszej rozdzielczości menu nie chowało się pod logiem tylko razem z stroną. Jak powinien być poprawnie ?

cały css

nav div.logo {
    margin: 10px;

}

nav {
    background: red;
    display: flex;
}

nav ul {
    list-style: none;
    max-width: 1440px;
    margin-left: 30px;
}

nav li {

    display: inline-block;

}

nav a {
    display: block;
    margin-top: 45px;
    margin-left: 20px;
    text-decoration: none;
    font-size: 1.9rem;
    color: black;
    text-transform: uppercase;
}

nav a:hover {

    border-bottom: 3px solid green;
}

html

<body>
    <nav>
        <div class="logo">
            <img src="img/logo.png" alt="logo"></div>
        <ul>
            <li><a class="btn1" href="#">Strona główna</a></li>
            <li><a class="btn2" href="#">Aktualności</a></li>
            <li><a class="btn7" href="#">Harmonogram treningów</a></li>
            <li><a class="btn3" href="#">Trener</a></li>
            <li><a class="btn4" href="#">Historia bjj</a></li>
            <li><a class="btn5" href="#">Mma</a></li>
            <li><a class="btn6" href="#">Pytania-faq</a></li>
            <li><a class="btn7" href="#">Kontakt</a></li>

        </ul>

    </nav>

1 odpowiedź

odpowiedź 12 maja 2020 przez frostify Mądrala (5,640 p.)
wybrane 13 maja 2020 przez Mateusz450

Najlepsza

Żeby dostosować stronę do urządzeń mobilnych potrzebujesz uczyć się o responsive design.

Jednym z głównych jego elementów są media queries w css:

@media screen and (max-width: 1150px) {
Kody, które tutaj wpiszesz wczytają się, gdy szerokość ekranu będzie miała 1150 pikseli,
albo mniej.
Powyżej 1150px szerokości ekranu, wpisane tutaj kody nie zadziałają
}

W dużym uproszczeniu, bo dopasowywanie do urządzeń mobilnych powinno być moim zdaniem dużo bardziej dopracowane, wygląda to mniej więcej tak:

https://codepen.io/frostify/pen/qBOozGX