-1

我想将我的 Slicknav 菜单按钮居中对齐，但我一生都无法弄清楚如何。我花了几天时间编辑 CSS 无济于事。我也不希望它固定在页面顶部（我想在其上方放置一个带有社交媒体按钮的 div），但是每当我将 prependTo 属性编辑为除“body”之外的任何内容时，整个菜单都会消失。

<div id="nav-wrapper">
<div id="nav">
    <ul id="menu">
        <li class="main"><a href="#" class="nav">Home</a></li>
        <li class="main"><a href="#" class="nav">News</a></li>
        <li class="main"><a href="#" class="nav">Books</a></li>
        <li class="main"><a href="#" class="nav">Bio</a></li>
        <li class="main"><a href="#" class="nav">Extras</a></li>
        <li class="main"><a href="#" class="nav">Contact</a></li>
    </ul>
</div>
</div>


#nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
#nav {
    width: 300px;
    margin: 0 auto;
    position: relative;
}

<script>
    $(function(){
        $('#menu').slicknav({
        label:'MENU',
        prependTo:'nav-wrapper',
        closeOnClick:'true' // Close menu when a link is clicked.
});
});
</script>
4

3 回答 3

3

我解决了这个问题。我没有在 prependTo 行中的 div ID 之前放置井号。这有效：

<script>
    $(function(){
        $('#menu').slicknav({
        label:'MENU',
        prependTo:'#nav-wrapper',
        closeOnClick:'true' // Close menu when a link is clicked.
});
});
</script>
于 2014-08-12T05:12:02.187 回答
0

请发布一些代码，以便我们可以看到您在做什么！

到目前为止，虽然通常的问题是你需要包装你的粘性导航：

<body>
    <div class="sticky-nav-wrapper">
        <div class="sticky-nav"> STICKY NAV </div>
    </div>

...content
</body>

.sticky-nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}
.sticky-nav {
    position: relative;
    height: 40px;
    width: 500px;
    margin: 0 auto;
}

无论如何都是这样的。

于 2014-08-10T04:48:15.980 回答
0

在Jquery.slicknav.js中，这里有一个选项prependTo: 'body'，因此，如果您想将移动导航放在自定义部分下，请更改此选项中的类名 例如prependTo: '.custom-nav'，享受 ：）

于 2017-03-19T14:25:32.100 回答