调整大小时菜单重叠徽标

Question

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

我做了一些研究，并认为它可能与浮动属性有关，菜单设置为浮动，徽标上没有浮动但是当我浮动徽标或包裹在徽标打破了布局。我觉得它应该是一个简单的解决方案，但我似乎无法弄明白，任何帮助将不胜感激。

由于

Answer 1

两边都是固定宽度，两者都是固定宽度（基于窗口宽度）。如果它更小，它们会重叠，如你所知。有几种解决方案。

1：将父级转换为固定宽度

这会将父级修复为特定宽度，徽标和菜单永远不会靠得更近。

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

这将导致徽标和菜单的宽度与父级一起改变，因此不会有任何打击。它不适用于菜单，因为文本不能设置为宽度的百分比（除非你使用Javascript）。

3：使用其他媒体查询

最终媒体查询启动并将网站更改为移动版本。查看菜单和徽标开始重叠的宽度。设置媒体查询以在此时将徽标更改为较小的宽度。我说750px是一个很好的突破点。

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

    .lcla-logo {

        width:300px;

    }

    #menu-splash li {

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

    }

}

Answer 2

您应该做这样的事情 - ＆gt;

@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
  //---------------------------------

}

这可以解决您的问题