2017-02-04 128 views
-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之間。

關於如何總是看到側邊欄項目(但不覆蓋頂部導航欄)的任何想法?

+0

請發表**最小工作示例**你的代碼(HTML/CSS/JS)在[Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)。參見[mcve]和[問]。 – vanburen

+0

你能分享鏈接嗎? –

+0

@vanburen我最小的嘗試鏈接 –

回答

1

根據導航欄高度,您可以使用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) 
})