Twitter Bootstrap Sidebar Position unter Navbar nicht dahinter

Question

Ich benutze eine Sidebar und Top-Nav-Leiste mit Bootstrap. Ich möchte immer die Seitenleiste sehen, egal wie groß die obere Navigationsleiste ist.

Die Seitenleiste zeigt jedoch OK, wenn ich den Bildschirm schmaleren (1/2 Bildschirm auf Desktop) mache die obere navbar aufgreift 2 Reihen (3 oder 4 Zeile, wenn schmalere) und liegt über den oberen Teil der Seitenleiste die obere Verschleiern Seitenleiste Links.

Das Problem tritt nur auf, wenn ich den unten abgebildeten navbar-rechten Block einschließe.

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> 

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

Stift hier ist (Entschuldigung, wenn ein wenig weitschweifig)

https://codepen.io/hf7dpr/pen/ggzVpd

Die navbar die Sidebar auf widow liegt über die Größe zwischen 765 und 840px Breite im Codepen ..

Haben Sie Ideen, wie Sie immer die Sidebar-Elemente sehen (aber nicht über der oberen Navigationsleiste)?

Answer 1

Sie können die obere Position der Seitenleiste mit Javascript entsprechend der Höhe der Navigationsleiste ändern. Hier ist ein Beispiel (hinzugefügt jQuery, js Code und IDs für Ihre nav ist so js von Styling-Klassen getrennt):

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