0

我正在研究的 WP 响应式主题：

http://www.wpexplorer.me/俄罗斯方块/

在弄乱实际文件之前，我使用 Firebug for Firefox 浏览器插件来进行更改。因此，如果您有它或类似的东西，您将通过添加 position:fixed; 来看到它。到#header 部分，标题宽度缩小了其原始大小的一半以上，并且导航菜单在新的缩小空间内被顶起。

我在 #header 部分添加了其他代码片段，例如 width:100%;, width:959px; 和其他百分比和像素，这会弄乱布局；尤其是当您将窗口大小调整到您认为适用于平板电脑和移动设备的大小时 - 一切都失控了。我无法让这个主题的粘性标题起作用或做对。哦，我还添加了 z-index:200; 到#header部分和margin：160px 0；到#main-content；这些不给我问题。

添加宽度：; #main-content 的代码似乎也无济于事（我在网上某处读到这是宽度代码所在的位置）。

无论如何，有谁知道我需要什么代码才能使这个主题的标题向上滚动，直到它到达页面顶部，它在任何时候都变得粘/静态/固定/在顶部（无论它的真正术语是什么） ? 而且，当窗口的大小一直调整到移动设备的大小时，你能否让它与布局保持一致？

谢谢。

4

1 回答 1

0

这应该工作

#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}

该位置使用 0 和 z-index:999 固定在顶部，然后您需要将内部容器前标头的宽度设置为 960px 以匹配其余部分。

您需要为已设置的其他尺寸设置媒体查询。轻松，享受。

如果您希望菜单本身而不是社交图标成为没有社交图标的顶部固定栏，那么您需要进行 jquery 滚动 CSS 更改，以便 #header 成为固定位置。

它使用固定的标题和社交：

WP响应主题

使用 Jquery Scroll CSS 更改在没有社交栏的情况下工作的图示：

俄罗斯方块 WP 响应式主题

这就是我要做的方式，我会将菜单向下移动，并将社交图标添加到菜单本身。（下面是我的意思的截图，社交图标减少到75%）

固定菜单社交栏 WP 响应主题

PS。社交图标非常突出，所以我会添加一个 CSS3 灰度，当访问者将鼠标悬停在它们上方时，它会打开带有过渡效果的颜色。希望这可以帮助 ;）

于 2012-12-17T01:37:09.217 回答