Html 调整大小时的菜单重叠徽标

左侧为徽标，右侧为菜单。菜单以600px的速度变为移动菜单，位于徽标下方，但在600px和800px之间，菜单与徽标重叠，我似乎无法解决它

我做了一些研究，认为这可能与float属性有关，菜单设置为向右浮动，徽标上没有浮动，但当我浮动徽标或环绕徽标的div时，会破坏布局。我觉得这应该是一个简单的解决方案，但我似乎无法找到它，任何帮助将不胜感激

---

谢谢

两边都是固定宽度的，并且容纳两边的父对象是灵活的（基于窗口宽度）。你知道，当它变小时，它们会重叠。有几种解决方案

1：将父对象转换为固定宽度

这会将父项固定为特定的宽度，徽标和菜单永远不会靠得更近

2：将徽标和菜单转换为灵活

这将导致徽标和菜单的宽度随父项一起改变，因此不会出现任何碰撞。但它不能与菜单一起使用，因为文本不能设置为宽度的%（除非使用Javascript）

3：使用其他媒体查询

最终，媒体查询开始出现，并将网站更改为移动版本。查看菜单和徽标开始重叠的宽度。设置媒体查询以将徽标更改为该点的较小宽度。我认为750px是一个很好的断点

@media screen and (max-width: 750px) {

    .lcla-logo {

        width:300px;

    }

    #menu-splash li {

        margin-left:3px;
        margin-right:3px;

    }

}

---

您可能应该这样做-->

---

这可能会解决您的问题

一种解决方案是，如果菜单中断，将菜单更改为800px而不是600px。如果降低屏幕宽度，它已经改为600px的移动设备。但你最好在800px上打破它，而不是在600px上打破它，因为你的徽标占用了一个很长的宽度。是的，但如果他也改成移动菜单，那么这将打破一切。最好找到现有的转换并更改编号。或者添加第二个断点。

@media screen and (max-width: 800px){
  .lcla-logo{
              width:70%; //you can change this according to you
              margin: 5px auto; //for centering your logo
   }

  //----------------------------------  
  // AND here change your menu to mobile menu
  //---------------------------------

}