我正在使用带有引导程序的侧边栏和顶部导航栏。我想总是看到侧边栏,无论顶部导航栏的大小是多少。
边栏显示OK然而当我使屏幕变窄(桌面上的1/2屏幕)时,顶部导航栏占用2行(如果更窄则为3行或4行)并覆盖侧边栏的顶部,遮挡上边栏链接。
仅当我包含如下所示的导航栏右侧块时才会出现此问题。
HTML:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
...
</ul>
<!-- The problem occurs with this ul block below -->
<ul class="nav navbar-nav navbar-right">
...
</ul>
目前的css:
div.navbar {
z-index: 999;
}
.top-nav {
padding: 0 15px;
}
@media(min-width:768px) {
body {
margin-top: 50px;
}
}
@media(min-width:768px) {
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: white;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
}
笔在这里(道歉,如果有点冗长)
https://codepen.io/hf7dpr/pen/ggzVpd
导航栏覆盖寡妇边栏,在codepen中调整765到840px之间的宽度。
有关如何始终查看侧边栏项目(但不会覆盖顶部导航栏)的任何想法?
答案 0 :(得分:1)
根据导航栏高度,您可以使用javascript更改侧边栏的顶部位置。这是一个例子(为你的导航添加了jQuery,js代码和id&#39;所以js与样式类分开):
https://codepen.io/themeler/pen/MJXEpE
$(function () {
var calculateHeight = function () {
$('#side-nav').css('top', $('#navbar').height() + 'px')
}
// init
calculateHeight()
// recalculate on window resize
$(window).on('resize', calculateHeight)
})