Logo i menu w jednym pasku

Question

Witam.

Dawno nie pisałem w HTMLu, jestem teraz raczej początkujący. Chcę zrobić nawigacje z logiem w jednej lini tak żeby wyglądała podobnie jak na stronie: https://www.ubuntu.com. Tylko że logo textowe

mam coś takiego:

<nav>
         <div class="logo">
            <h1 class="menuNav">Sec0S</h1>
         </div>
         <div class="rightNav">
            <ol class="menuTop">
               <li><a href="#" class="menuLink">Team</a></li>
               <li><a href="#" class="menuLink">Developer</a></li>
               <li><a href="#" class="menuLink">Community</a></li>
               <li><a href="#" class="menuLink">Donate</a></li>
               <li><a href="#" class="menuLink">Download</a></li>
            </ol>
         </div>
 </nav>

Jak to ostylować żeby div 'Logo" układał się równo z "rightNav", przy użyciu display: inline-block; divy zachowują się bardzo dziwnie. Proszę o pomoc. 

Answer 1

Zdecydowanie odradzam tutaj stosowanie czegoś takie, jak float - krzywdzisz sam siebie :D
A to co polecam to flexbox, o którym wspomniał już @k.wichura. Dzięki niemu też fajnie sobie można "przestawiać" elementy na mobile. To tylko kilka dodatkowych właściwości CSS, a nie tylko menu sobie ustawisz, ale i inne elementy na stronie, właściwie nawet fajne galerie można na nim zbudować :)

Jeszcze uwaga, co do Twojego kodu. Nie używaj listy <ol> bo jest to lista ponumerowana, a przecież od razu widać, że ta numeracja nie jest potrzebna w przypadku menu. W takiej sytuacji używamy <ul>.

A no i klasa 'rightNav' też nie jest za bardzo poprawna. Staraj się tworzyć takie, które nie mówią nic o tym, jak element wygląda, czy gdzie się znajduje. Samo 'nav' byłoby zdecydowanie lepsze i prostsze :P

Answer 2

zainteresuj sie https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

display flex na ol i powinno smigac :)

Answer 3

https://codepen.io/Hoorder/pen/QVpBJx  coś takiego ? albo ja coś źle zrozumiałem

Answer 4

@Noemi @k.wichura @Dzikus - Dzięki wam za odpowiedzi i pomoc.