经过多次尝试解决这个问题后，我现在需要您的帮助。我创建了一个带有 Logo 的菜单系统。我的问题是，当@media 达到 823px 时，菜单不会堆叠在 Logo 下方。谁看到了我的问题的解决方案？
代码和 CSS 可以在这个代码笔上找到 https://codepen.io/Daxtux/pen/zJLgBX
<a href="#news"><img src="Logo.png" alt="Logo" style="float:left;width:110px;"></a>
<div class="Navigasjon" id="Toppnavigasjon">
<a href="#news">MENY 1</a>
<a href="#Howto">MENY 2 </a>
<a href="#about">MENY 3</a>
<a href="#about">MENY 4</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
非常感谢所有帮助!
最佳答案
所以您希望点击右上角的汉堡包菜单，然后菜单出现在 Logo 下方？我的第一个问题是为什么不一直把它放在 Logo 下面。
但忽略这一点，我的建议是把logo和header都放在一个包含div的地方，然后用display: flex;或者display: grid;来设置它们向上，以便它们按照您希望的方式落下。
例如，如果您将容器设为 width: 100%;显示: flex ； justify-content:space-between;flex-wrap: wrap; 然后在每个子元素上放置 min-width: 450px;，子元素会自动换行到下一行宽度小于 900 像素。
您可以使用 display:grid; 做类似的事情；通过将 grid-template-columns: 1fr 1fr; 更改为 grid-template-columns: 1fr; 在较小的媒体查询大小。
关于javascript - 获取响应式 Javascript 菜单以堆叠在 img 下。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52345271/