【问题标题】:Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?Wordpress如何制作粘性导航菜单/使菜单始终粘在顶部?
【发布时间】:2014-09-25 15:35:12
【问题描述】:

我使用的是 Wordpress 默认主题 Twenty Twelve,我的网站是:http://ninarakovec.com

我想让我现有的导航菜单在滚动时一直停留在顶部,例如名为 wpsites 的网站(由于 stackoverflow 的链接限制,无法发布链接)。

您可以在此处查看主题的 CSS:http://pastebin.com/muXyT6AY

我将如何继续这样做,我不知道该怎么做,我目前已经做到了,所以你可以点击导航栏,它会将你带到页面上的相应部分,但菜单没有' t坚持到顶部,所以这不是我想要的。请帮忙!

【问题讨论】:

    标签: css wordpress menu navigation sticky


    【解决方案1】:

    这应该可行:

    .site-header {
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        background-color: lightblue;
        z-index: 1000;
    }
    .main-navigation ul.nav-menu {
        border: 0;
    }
    

    【讨论】:

    • 这行得通!谢谢!但是我怎么能摆脱这个区域呢? i.imgur.com/MQotFAN.jpg
    • 杀死 .site-navigation 上的 margin-top
    • 很抱歉,我在 CSS 文件中找不到 .site-navigation,我做错了什么?
    • 然后将 .site-navigation{margin-top: 0;} 添加到您的 CSS 中。
    • 是的,我之前尝试过,但没有成功,除了将它添加到我的 css 之外,我还应该做其他事情吗?
    【解决方案2】:

    我认为您必须将 .site-header 类更改为:

    .site-header {
            padding: 24px 0;
            padding: 1.714285714rem 0;
            position:fixed;
            top:0;
            margin:0 auto;
    }
    

    【讨论】:

    • 谢谢,这行得通,但问题是它并不总是显示出来,例如,现在如果你向下滚动菜单可以隐藏在滑块和文本后面,我该如何做这个动作“总是在顶部”,所以它总是可以看到?
    • z-index: 1; 添加到.site-header css。
    • 好的,达到了我想要的效果,但是看起来还是很呆,现在我想去掉顶部和底部的那些白色区域; i.imgur.com/tstcfee.jpg
    猜你喜欢
    • 1970-01-01
    • 2018-05-24
    • 1970-01-01
    • 2023-02-07
    • 2017-03-14
    • 1970-01-01
    • 1970-01-01
    • 2020-07-23
    • 2018-07-27
    相关资源
    最近更新 更多