Html 标题中有两个导航和一个徽标

我有一个问题，我需要做，两个导航和左侧的一个标志。我所需要的你们可以在下图中看到

我需要有效地响应，当浏览器缩小时，间隙将逐渐缩小，直到跳转到汉堡包菜单

下面你可以看到我现在是如何拥有它的，我需要的图片，但我不知道如何做到这一点

。站点导航{
宽度：100%；
高度：100px；
显示器：flex；
}
.站点导航.导航标志{
宽度：200px；
高度：100px；
浮动：左；
显示器：flex；
}
.站点导航.导航标志img{
宽度：97px；
高度：47px；
保证金：自动0；
}
.站点导航.导航链接{
高度：100px；
浮动：对；
柔性生长：1；
}
.站点导航。导航链接ul{
列表样式：无；
保证金：0；
填充：0；
高度：100px；
显示器：flex；
}
.站点导航。导航链接ul li{
浮动：左；
保证金：自动；
左侧填充：16px；
}
.site nav.nav链接ul li:非（：最后一个子项）{
右边填充：16px；
}

下面的例子怎么样。使用css很容易指定列。使用额外的属性，如

justify content

，可以指定列的间距

。站点导航{
宽度：100%；
高度：100px；
}
.场地导航集装箱{
显示：网格；
网格模板列：200px 1fr 1fr；
}
.站点导航.导航标志{
网格柱：1；
宽度：200px；
高度：100px；
浮动：左；
显示器：flex；
}
.站点导航.导航标志img{
宽度：97px；
高度：47px；
保证金：自动0；
}
.站点导航.导航链接{
网格列：自动；
}
.场地导航{
列表样式类型：无；
}
.场地导航李{
显示：内联块；
}

您可以使用嵌套的FlexBox和媒体查询来获得所需的结果。我使用虚拟图像作为标识和汉堡

ul{
列表样式：无；
保证金：0；
}
.场地导航{
宽度：100%；
}
.集装箱{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：80%；
保证金：0自动；
}
.导航链接{
显示：无；
}
.导航链接.导航列表{
显示器：flex；
柔性包装：无包装；
}
.手机菜单{
位置：相对位置；
}
.移动菜单.导航列表{
显示：无；
位置：绝对位置；
底部：-90px；
左：-40px；
}
.mobile菜单：悬停>.nav列表{
显示：内联块；
}
.nav links.nav list>li:not（：最后一个子项）{
右边距：1rem；
}
@媒体屏幕和屏幕（最小宽度：500px）{
.手机菜单{
显示：无；
}
.导航链接{
显示：内联块；
}
}

.site nav{justify content:space equalified；}哎哟，这正是我想要的。有更多的导航，另一个用于移动设备，这不是很糟糕吗？要么是这样，要么是菜单定义了一次，给CSS增加了很多复杂性。