Jeżeli nie musisz wspierać IE9 i starszych to najłatwiej będzie użyć flexbox'a. align-items: center; wyśrodkuje Ci elementy w pionie, poza tym justify-content: space-between spowduje, że 2 elementy wypchną się do prawej i lewej strony kontenera, więc po lewej z łatwością wstawisz logo, a po prawej będziesz miał menu.
Wystarczy, że w .nav dodasz sobie div'a z logo (czy tam img - jak wolisz), obok ul.
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
Alternatywnie, jeśli wysokość .nav będzie stała to kod poniżej wyśrodkuje Ci elementy w pionie, ale wtedy jeszcze będziesz musiał kombinować z floatami lub czymś innym żeby umiejscowić logo po lewej, a menu po prawej.
.nav {
height: 60px
}
.nav ul {
line-height: 60px
}
Poza tym znajdzie się kilka innych sposobów, w tym wykorzystanie position: absolute;