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>