重新调整菜单重叠标志

左侧标志，右侧菜单。菜单变为600px的移动菜单，低于徽标，但在600px和800px之间，菜单与徽标重叠，似乎无法解决该问题。重新调整菜单重叠标志

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

由于

来源

2014-03-05 user1048696

一种解决方案是有菜单变化在800像素，而不是600px的，如果那是你的菜单中断的时候。 –

两侧固定宽度，和容纳两个亲本是柔性的（根据窗口宽度）。正如你所知道的，当它变小时，它们会重叠。有几种解决方案。

1：转换父到固定宽度

这将修复父为特定宽度，标志和菜单将永远不会得到紧密联系在一起。

2：转换的标志和菜单灵活

这将导致标识和菜单与父母一起在宽度改变，所以任何事都不能命中。但它不会与菜单一起工作，因为文本不能设置为宽度的百分比（除非您使用Javascript）。

3：使用另一个媒体查询

最终媒体查询踢，现场变成一个移动版本。查看菜单和徽标开始重叠的宽度。设置媒体查询以将徽标更改为更小的宽度。我会说750px是一个很好的折点。

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

    .lcla-logo { 

     width:300px; 

    } 

    #menu-splash li { 

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

    } 

}

enter image description here

来源

2014-03-05 20:18:04

你或许应该这样做 - >

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

}

这可能会解决你的问题

来源

2014-03-05 20:22:48

如果您降低屏幕宽度，它已经变为600px的移动。 –

但是，由于您的徽标占用了较小的宽度，因此您最好在800px以上将其拆分为600px。 –

是的，但添加它会破坏东西，除非他也切换到移动菜单。最好找到现有的转换并更改号码。或者添加第二个断点。 –

重新调整菜单重叠标志

回答

相关问题