当站点变窄时更改菜单浮动(响应)

Question

我有一个网站，网址是www。structuredata。COM

当网站在桌面上时，它看起来很棒。然而，当它开始变窄，红色的“注册”按钮开始与菜单重叠时，我想在我的css中进行一个媒体查询，当在较小的屏幕上查看时，它将强制按钮下降到导航下方。我该怎么做呢？

标头设置为

<div id="header_main">
   <div class="container">
     <div class="inner-container">
      <strong class="logo"></strong>
      <nav class="main_menu"></nav>
      <div id="text-8" class="widget"> BUTTON IS HERE </div>
     </div>
   </div>
</div>

我试着设置我的.header_main.widget

to a display:block和inline-block，但都不起作用。我试过了:两个都在上面。

Answer 1

媒体查询可能很棘手，你可以在here(w3c)和here(mdn)上读到很多关于它们的信息

在您的示例中，媒体查询将如下所示：

@media screen and (max-width:320px) {
    #header_main .container .inner-container .widget {
        /*Styles go here*/
    }
}

希望这能有所帮助！

Answer 2

您的导航栏和按钮位于不同的z索引上，因此这将是一个棘手的问题。这也是clear不能工作的原因。

您可以设置一个媒体查询来调整按钮的top位置(因为它是相对定位的)，如下所示：

@media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
  #header .widget .avia-button-wrap {
      top: 50px !important; 
   }
}

但是，您可能必须调整头部中的一些其他元素，以使一切看起来都正常。但这应该能让你开始吧！