Salve a tutti, sono nuovo nel forum e da qualche giorno ho iniziato a studiare html e css per la creazione di un blog. Ho creato la mia homepage, e nell'header ho messo un logo a sinistra e la navbar a destra. Adesso però durante il ridimensionamento della pagina, la navbar si sposta fino al logo ma quando lo incontra la navbar diventa come se fosse una lista, quindi scritta in verticale. Vorrei fare in modo che nel ridimensionamento, arrivati ad una certa larghezza di pagina, la navbar rimanga in orizzontale e vada sotto al logo, è possibile? Condivido il mio codice:

HTML:
<body>


<header>


<!-- Logo del sito, che se cliccato porta alla home -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"/></a>
</div>


<!--Creo il menù con i collegamenti alle varie pagine(dentro l'header)-->
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="pagine/recensioni.html">RECENSIONI</a></li>
<li><a href="pagine/news.html">NEWS</a></li>
<li><a href="#chisiamo">ABOUT</a></li>
</ul>
</nav>


<!-- Immagine per login che cambia colore al movimento del cursore -->
<div class="admin">
<a href="pagine/login.html"><img src="images/admin1.png" onmouseover="src='images/admin2.png'" onmouseout="src='images/admin1.png'"></a>
</div>


</header>

CSS:
header{
top: 0;
position: sticky; /*Serve a bloccare l'header*/
display: flex;
justify-content: flex-end; /*Li sposto nella fine della riga*/
align-items: center;
padding: 0px 3%;
background: linear-gradient(to bottom, #efefef 0%, #a2a2a2 100%);
min-width: 530px; /*Larghezza aumentata in modo da non dare problemi allo zoom*/
font-weight: bold;
}


/*---- Tolgo la sottolineatura dai link, metto il loro colore sul nero e applico il font ----*/
nav ul li a{
font-family: 'Press Start 2P', cursive;
text-decoration: none;
color: black;
}


/*---- Inserisco la transizione al passaggio del mouse ----*/
nav ul li a{
transition: all 0.3s ease 0s;
}


/*---- Colore bianco al passaggio del mouse ----*/
nav ul li a:hover{
color: white;
}


/*---- Tolgo i pallini stile lista dalla nav ----*/
nav ul{
list-style: none;
}


/*---- Sistemo gli spazi nella nav ----*/
nav ul li{
display: inline-block;
padding: 0px 20px;
}


/*---- Sistemo gli spazi delle immagini del logo e dell'admin nella nav ----*/
.logo{
margin-right: auto;
}


.admin{
margin-left: 35px;
}