Css 当站点变窄时更改菜单浮动（响应）

我在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\u main.widget

---

显示：块和内联块，但两者都不起作用。我试着弄清楚：这两种方法都有。

媒体查询可能很棘手，你可以阅读很多关于它们的信息，然后

在您的情况下，媒体查询将如下所示：

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

---

希望这有帮助

您的导航栏和按钮位于不同的z索引上，因此这将很棘手。这也是

clear

不起作用的原因

您可以设置一个媒体查询来调整按钮的

顶部

位置（因为它是相对定位的），如下所示：

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

---

但是你可能需要调整标题中的一些其他元素，以使一切看起来都正常。但这应该让你开始

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然您提供了一个示例的链接，但如果该链接无效，您的问题对其他将来有相同问题的用户将毫无价值。我可以将该按钮添加到相同的z索引中，还是从导航中删除索引调用？那我该怎么办呢？如果我在做这个网站，我会把“立即注册”按钮（或者可能只是一个简单的链接）放在jumbotron里面，因为它的广告和那里的一样，但那只是我耸耸肩。在很多不同的层上都有很多东西，因此需要进行大量的重组，以使其响应更好。