javascript - 在 Logo 下移动主导航图标

Question

我目前使用的是 wp 主题 ( http://preview.themezee.com/dynamicnews/ )，但是我做了一些微调 ( http://www.angrycrows.com )。正如您在未经编辑的原始主题中看到的那样，导航栏将根据浏览器的宽度变成下拉菜单。在我修改后的版本 (angrycrows.com) 中，它做同样的事情，但它没有将自己整齐地放在 Logo 下面(因为我所做的更改)。我的问题如下，如何在 Logo 右侧的较大导航栏保持更改，同时将迷你导航整齐地放置在 Logo 下方？下面是 angrycrows 修改后的 CSS。

#navi-wrap {
background: #333;
    position: relative;
    bottom: 75px;
    right: 25px;
    float: right;

非常感谢。

Answer 1

你有 media="all"的 #navi-wrap 规则如果您想要一个响应式网站，您必须使用媒体查询。

创建管理小屏幕样式的媒体查询。在您的情况下，您的网站会在 960px 处更改其样式，因此您必须为该宽度创建一个媒体查询

@media (max-width: 960px){
   #navi-wrap {
     background: #333;
     margin: 0 10px;
   }
}

/* your full site style */
@media (min-width: 961px){
   #navi-wrap {
     background: #333;
     position: relative;
     bottom: 75px;
     right: 25px;
     float: right;
   }
}

希望对您有所帮助。