Two navigation and one logo in header

I have a problem, I need to do, two navigation and one logo on left side. What I need you can see on image below

I need to do effectively and responsively, when the browser shrinks, gaps will gradually shrink until it jumps to the hamburger menu.

Below you see how I have it now, the picture I need but I do not know how to do it

.site-nav
width: 100%;
height: 100px;
display: flex;

.site-nav .nav-logo
width: 200px;
height: 100px;
float: left;
display: flex;

.site-nav .nav-logo img
width: 97px;
height: 47px;
margin: auto 0;

.site-nav .nav-links
height: 100px;
float: right;
flex-grow: 1;

.site-nav .nav-links ul
list-style: none;
margin: 0;
padding: 0;
height: 100px;
display: flex;

.site-nav .nav-links ul li
float: left;
margin: auto;
padding-left: 16px;

.site-nav .nav-links ul li:not(:last-child)
padding-right: 16px;


<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="logo.png" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</nav>

2 Answers
2

You can use nested flexboxes and media queries to get the desired result. I used dummy images for the logo and the hamburger.

ul
list-style: none;
margin: 0;


.site-nav
width: 100%;


.container
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 0 auto;


.nav-links
display: none;


.nav-links .nav-list
display: flex;
flex-wrap: no-wrap;


.mobile-menu
position: relative;


.mobile-menu .nav-list
display: none;
position: absolute;
bottom: -90px;
left: -40px;


.mobile-menu:hover>.nav-list
display: inline-block;


.nav-links .nav-list>li:not(:last-child)
margin-right: 1rem;


@media screen and (min-width: 500px)
.mobile-menu
display: none;

.nav-links
display: inline-block;



<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://via.placeholder.com/50x50" alt="">
</div>
<div class="mobile-menu">
<img src="https://via.placeholder.com/30x30" alt="">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</nav>

How about the following example. With css grid it's easy to specify columns. With extra properties like justify-content you can specify how the columns are spaced.

justify-content

.site-nav
width: 100%;
height: 100px;


.site-nav .container
display: grid;
grid-template-columns: 200px 1fr 1fr;


.site-nav .nav-logo
grid-column: 1;
width: 200px;
height: 100px;
float: left;
display: flex;

.site-nav .nav-logo img
width: 97px;
height: 47px;
margin: auto 0;


.site-nav .nav-links
grid-column: auto;


.site-nav
list-style-type: none;


.site-nav li
display: inline-block;


<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>

<div class="nav-links">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</nav>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.