Question

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

<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>

Answer 1

我弄明白了这个问题。我没有在prependTo行中的div ID之前放置英镑符号。这有效：

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

Answer 2

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

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

<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;
}

这样的事情。

Answer 3

在 Jquery.slicknav.js 中，一个选项是 prependTo：'body'，所以如果您想将移动导航放在自定义栏下，请更改此选项中的类名称例如 prependTo：'。custom-nav'，享受:)

Slicknav菜单的定位

3 个答案: