Bewegen navbar unten header bootstrap
Ich bin ganz neu gestartet und ich Frage mich, wenn jemand könnte ein paar Ratschläge geben, wie ich wäre in der Lage, meine navbar unter meinem header. Dies ist mein Aktueller code für die beiden:
Header:
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
Navbar:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Sign up</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Jeder Art, Anregungen und Tipps würde sehr geschätzt werden. Ich bin auch ziemlich neu in der Programmierung so gut Erläuterungen gehen zusammen Weg! =)
InformationsquelleAutor Nappstir | 2015-07-12
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nur ändern
zu
navbar-top
Bearbeiten für die zweite Antwort:
Ändern Ihre
Und Sie müssen hinzufügen, die jquery-Referenz-und dieses kleine script.
Im Grunde, was dieses tut, wird überprüft, wie viel Sie haben gescrollt von oben und wenn Sie Ihren pass-header-Höhe fixiert es die navigationssteuerung, um oben zu bleiben. Sie brauchen nur zu ändern die headerHeight-Wert, um Ihre Kopf-Höhe.
Ich bearbeitet meine Antwort passend zu Ihrer zweiten Frage.
Ich dachte, ich könnte jquery verwenden, so etwas habe ich noch in die Hände zu bekommen. Ich werde in diesem irgendwann nächste Woche. Für jetzt, ich will nicht mit deinem ersten Vorschlag und dann versuchen Sie, und implementieren Sie den neuen code, den Sie zur Verfügung gestellt haben. Ich Schätze Sie die Zeit nehmen, um meine Frage zu beantworten und Dinge erklären.
InformationsquelleAutor luk492
InformationsquelleAutor Abhinav Pandey