Ich habe eigentlich die gleiche Sache auf einem gestern Projekt. Sie können zwei Navbars verwenden, beide mit fixed-top
oder die zweite mit static-top
und fügen Sie einen entsprechenden margin-top
hinzu.
Hier ist ein einfaches Arbeitsbeispiel:
<nav id="top-nav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a id="brand" class="navbar-brand" href="#">...</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-earphone"></span>
</li>
</ul>
</div>
</nav>
<nav id="bottom-nav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="center-nav" class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Ok..two Dinge. One - Bitte hosten Sie Ihren Code nicht auf einer externen Website (es sei denn, es handelt sich um Ihre * tatsächliche * Seite. Ich erwartete Ihren HTML-Code, wurde aber aufgefordert, eine Datei von einer Website herunterzuladen, die ich noch nie zuvor besucht hatte. Zwei - Also willst du die Navigationsleiste halb zwischen den blauen und weißen Hintergrundbereichen stellen? Was hast du bisher versucht? –
Ok danke für diesen Tipp. Ich werde es in Zukunft so machen!:) – CabCon