Twitter Bootstrap侧边栏位置下方的导航栏不落后

-1

我正在使用带有自举的侧边栏和顶部导航栏。无论顶部导航栏的大小如何，我都希望始终能看到侧边栏。Twitter Bootstrap侧边栏位置下方的导航栏不落后

侧边栏显示行但是当我使屏幕更窄（1/2屏幕上桌面）（如果较窄3或4行）的顶部导航栏占用2行和覆盖所述侧栏的顶部部分，模糊的上侧边栏链接。

只有当我包含下面显示的navbar-right块时才会出现此问题。

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

导航栏覆盖上寡妇侧边栏调整宽度在765和840px之间。

关于如何总是看到侧边栏项目（但不覆盖顶部导航栏）的任何想法？

来源

2017-02-04 Don Smythe

请发表**最小工作示例**你的代码（HTML/CSS/JS）在[Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。参见[mcve]和[问]。 – vanburen

你能分享链接吗？ –

@vanburen我最小的尝试链接 –

根据导航栏高度，您可以使用JavaScript更改侧边栏的顶部位置。下面是一个例子（加入jQuery的，JS代码和ID对你的资产净值的所以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) 
})

来源

2017-02-05 12:06:53

Twitter Bootstrap侧边栏位置下方的导航栏不落后

回答

相关问题