fixed navigation with logo - html

Question

How can I create top navbar with logo on the left and nav on the right. When i use flexbox or display-inline-block it doesn't work.
<header id="header" class="header">
<a class="logo" href="" title="">Essembli.</a>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header><!-- /header -->
My CSS:
.header {
position: fixed;
.logo {
float: left;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
}
}

Answer 1

You can get it by using following approach
I posted it in css not scss.
If you check fiddle it will more clear you that to how to get it.
Fiddle
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
background: tomato;
padding: 5px;
}
.logo {
flex: 1 0 0;
}
.navigation {
flex: 1 0 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.navigation ul {
display: flex;
width: 100%;
justify-content: space-between;
}
.content {
margin-top: 30px;
}
<header id="header" class="header">
<div class="logo">
LOGO
</div>
<div class="navigation">
<ul>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
</ul>
</div>
</header>
<!-- /header -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
</div>

Answer 2

You need to apply that display: inline-block; to .top-nav since nav is a block element by default.
Added red/green background color to show you the block size, instead of using float, just use a div to wrap the logo
https://jsfiddle.net/dalinhuang/hfhjtp2y/
SCSS:
.header {
position: fixed;
background: green;
.logowrapper {
display: inline-block;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
display: inline-block;
background: red;
}
}
.header {
position: fixed;
background: green;
}
.header .top-nav {
display: inline-block;
background: red;
}
.header .top-nav .site-nav {
display: inline-block;
}
.header .top-nav .site-nav li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
.logowrapper {
display: inline-block;
}
<header id="header" class="header">
<div class="logowrapper"><a class="logo" href="" title="">Essembli.</a></div>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<!-- /header -->