Html 在隐藏汉堡菜单中转换导航栏

因此，我创建了一个导航栏，现在，对于移动设备，我只想显示徽标和一个汉堡菜单（打开时），其中显示

和社交媒体图标（它们在html上，但我不能给它们任何宽度）。我不想把旧的导航栏菜单放在后面，我试着给它一个显示：在媒体查询中没有，或者背景色：透明，但没有一个工作

基本上，我希望汉堡包菜单显示李和带有社交媒体图标的盒子，所有这些都垂直显示

在给出以下代码的情况下，获得此结果的最佳方法是什么


.showcase.nav栏{
宽度：100%；
高度：8雷姆；
背景色：var（--品牌）；
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
位置：固定；
z指数：90；
盒状阴影：0 1.5rem 4rem rgba（0,0,0,4）；
排名：0；
}
.nav徽标{/*上传徽标时检查*/
宽度：14rem；
保证金：自动。5雷姆；
}
.showcase.导航栏.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：40%；
}
.陈列柜.导航栏.导航链接李{
边缘底部：.5em；
文本转换：大写；
字体大小：1.3rem；
字母间距：2米；
列表样式：无；
过渡：all.2s；
}
.showcase.导航栏.导航链接a{
颜色：var（--浅灰色）；
文字装饰：无；
}
.导航链接李：悬停，
.nav链接李：焦点{
转换：比例（1.2）；
}
.陈列柜.导航栏.导航社交{
保证金：0.2rem.5rem 2rem；
}
.陈列柜.导航栏.导航社交a{
保证金：0.5雷姆；
文字装饰：无；
颜色：var（--浅灰色）；
字体大小：1.8rem；
}
.汉堡包{
边缘：1米；
显示：无；
}
·汉堡包部{
宽度：25px；
高度：2倍；
背景色：#d1d1；
边缘：.4em；
}
@仅介质屏幕和（最大宽度：768px）{
.展示{
高度：100vh；
}
.导航栏{
}
.导航链接{
位置：绝对位置；
右：0px；
宽度：40%；
高度：80vh；
顶部：8rem；
背景色：var（--品牌）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.汉堡包{
显示：块；
}
}







无论您在哪里
显示：flex
，您还需要放置
flex-direction:column
，以便垂直显示内容

也就是说，您可能甚至不需要
display:flex
，因为您使用的元素的默认
display
是
block
，这使得它们的内容垂直堆叠。
我的最终目标是将徽标保持在原来的位置，并“摆脱”其他内容。然后显示汉堡菜单，点击后，它会显示在垂直的
和带有社交媒体图标的框中。我应用了display:flex，只是为了在我的桌面视图上很好地布局和居中，现在由于徽标位于导航中，我不知道如何提取它并去除其余部分，将徽标保留在没有背景的位置，但右侧是汉堡。希望现在更清楚