1
Ich möchte meine Nav-Leiste wie diese Website aussehen.Navbar werden transparent und fixiert nach oben, wenn Sie nach unten scrollen
http://bootstraplovers.com/templates/assan-v2.3/main-template/index.html
Wenn ich Scrollen, die Navigationsleiste dieser Vorlage wird transparent und wird nach oben fixiert. Ich möchte, dass meine Navigationsleiste dasselbe tut. Ich bin neu in HTML und CSS und auch Bootstrap. Kann mir jemand Ideen geben, wie man das macht oder irgendwelche Hinweise?
Das ist mein nav bar:
.navbar-header{
\t height: 74px;
\t }
\t
\t .navbar-toggle{
\t position: relative;
\t top: 15px;
\t }
\t .navbar-default .navbar-nav > li > a {
\t font-weight: 590;
\t color: #949494;
\t display: block;
\t padding: 5px 35px 2px 45px;
\t border-bottom: 3px solid transparent;
\t line-height: 70px;
\t text-decoration: none;
\t transition: border-bottom-color 0.5s ease-in-out;
\t -webkit-transition: border-bottom-color 0.5s ease-in-out;
\t }
\t .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
\t \t color:#a92419;
\t \t border-bottom-color: #a92419;
\t }
\t .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
\t \t color: #a92419;
\t \t background-color: white;
\t }
\t .navbar-default{
\t background-color:#fff;
\t margin: 0;
\t
\t }
\t .nav>li>a {
\t position: relative;
\t }
\t .navbar-default .navbar-right > li > a {
\t padding: 0 30px;
\t margin-right:6px;
\t }
\t .nav.navbar-nav > li{
\t display: :inline-block;
\t }
\t .nav.navbar-nav{
\t list-style-type:none;
\t }
\t .nav.navbar-nav > li > a:hover{
\t \t color:#a92419;
\t border-bottom-color: #a92419;
\t }
\t .navbar-default .navbar-toggle .icon-bar {
\t background-color:#a92419;
\t margin:0 0 4px;
\t width: 25px;
\t height: 5px;
\t margin-right: 13px;
\t }
\t .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
\t background: none;
\t }
\t button.navbar-toggle{
\t background:none;
\t border:none;
\t color:#000;
\t margin: 0px;
\t }
\t .dropdown:hover .dropdown-menu {
\t display: block;
\t }
\t
\t .dropdown-menu>li>a:hover {
\t \t color:#a92419;
\t }
\t .dropdown-menu>li>a {
\t \t display: block;
\t \t padding: 3px 20px;
\t \t clear: both;
\t \t font-weight: 400;
\t \t line-height: 3em;
\t \t color: #333;
\t \t white-space: nowrap;
\t }
\t .dropdown:hover a.dropdown-toggle {
\t border-bottom-color: #a92419;
\t color:#a92419;
\t }
\t .top-bar-dark {
\t background-color: #a92419;
\t }
\t
\t .top-bar-light {
\t background-color: #f3f3f3;
\t }
\t .top-bar-light .top-dark-right li {
\t border-color: #ddd;
\t }
\t
\t .top-bar-light .top-dark-right li a:hover {
\t color: #32c5d2;
\t }
\t .top-bar-socials {
\t line-height: 30px;
\t padding-top: 5px;
\t }
\t .top-bar-socials:after {
\t display: table;
\t clear: both;
\t content: "";
\t }
\t .top-bar-socials a {
\t margin: 0px 8px;
\t text-decoration: none;
\t font-size:18px;
\t color: #fff;
\t }
\t
\t .top-dark-right {
\t margin: 0px;
\t padding: 0px;
\t }
\t
\t .top-dark-right li {
\t line-height: 40px;
\t border-left: 1px solid #932015;
\t padding: 0px 10px;
\t
\t }
\t
\t .top-dark-right li, .top-dark-right li a {
\t color: #d7d7d7;
\t font-size: 12px;
\t }
\t
\t .top-dark-right li i {
\t margin-right: 5px;
\t }
\t
\t .top-dark-right li a:hover {
\t color: #fff;
\t }
\t a.login{
\t text-decoration: none;
\t }
\t .fa-facebook:hover{
\t color:#3b5998;
\t }
\t .fa-twitter:hover{
\t color:#1dcaff;
\t }
\t .fa-linkedin:hover{
\t color:#007bb5;
\t }<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-bar-dark">
<div class="container">
\t <div class="row">
\t <div class="col-sm-4 col-xs-7">
\t \t <div class="top-bar-socials">
\t \t <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
\t \t \t <i class="fa fa-facebook"></i>
\t \t </a>
\t \t <a href="https://twitter.com/official_gapc">
\t \t \t <i class="fa fa-twitter"></i>
\t \t </a>
\t \t <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
\t \t \t <i class="fa fa-linkedin"></i>
\t \t </a>
\t \t </div>
\t </div>
\t <div class="col-sm-8 col-xs-5 text-right">
\t \t <ul class="list-inline top-dark-right">
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li>
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
\t \t <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a>
\t \t </li>
\t \t </ul>
\t </div>
\t </div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
\t <div class="navbar-header">
\t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t </button>
\t <img class="img-responsive" src="images/brandz.png">
\t </div>
\t <div class="collapse navbar-collapse" id="nav-collapse">
\t <ul class="nav navbar-nav navbar-right">
\t \t <li class="active"><a href="#">Home</a>
\t \t </li>
\t \t <li class="dropdown">
\t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
\t \t <ul class="dropdown-menu">
\t \t \t <li><a href="#">History</a>
\t \t \t </li>
\t \t \t <li><a href="#">Mission and Vision</a>
\t \t \t </li>
\t \t </ul>
\t \t <li><a href="#">Admissions</a>
\t \t </li>
\t \t <li><a href="#">Contact us</a>
\t \t </li>
\t \t <li><a href="#">Faculty Portal</a>
\t \t </li>
\t </ul>
\t </div>
</div>
</nav>
die breite der navbar wenn ich scroll ist nicht 100% sir. nur etwa 80% Breite. – nethken
Oh, ich habe vergessen, 'width: 100%;' zu '.navbar.affix' hinzuzufügen. Das tut mir leid. Antwort aktualisiert –
hallo mein Herr, es hat schon funktioniert :) aber kann ich es transparent machen? – nethken