Sabit navbardan önce bir şey yazıyor

Question

Sabit navbardan önce web sitesinin adını ve sloganını yazmayı deniyorum. Bu sabit navbarım var ama nerede web sitesi başlığını yazsam ve navbar en üstte slogan kalıyorum.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">My top 5 music</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="nirvana.php">Nirvana</a></li> 
      <li><a href="gnr.php">Guns N'Roses</a></li> 
      <li><a href="beatles.php">The beatles</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
      <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

ben çalışıyorum tam this böyle bir şey nereden

Answer 1

İlk kez bir konuma sahip olmak başlığını ayarlayabilirsiniz senin örneğin bağlantı etkiyi elde etmek için: css akrabası ve sonra eklemek sonra pozisyona değiştirin: Kullanıcı kez sabit Ekrandaki belirli bir noktayı kaydırdı örneğin

HTML:

<div class="site-name">Site name</div> 
<div class="nav-bar">Nav bar</div> 

CSS:

.nav-bar { 
    position: relative; 
} 
.nav-bar.open { 
    position: fixed; 
} 

JS:

var scrollingNav = function() { 
    if ($(window).scrollTop() >= 50) { 
     $('.nav-bar').addClass('open'); 
    } 
    else { 
     $('.nav-bar').removeClass('open'); 
    } 
}; 

$(window).scroll(function() { 
    scrollingNav(); 
}); 

Örnek: https://jsfiddle.net/s5pwu3cj/1/

Answer 2

gibi: JSFiddle

Sadece orijinal yukarıda başka navbar eklendi ve aşağı

orijinal bir taşıdığınız

HTML

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <h3>Logo</h3> 
    </div> 
</nav> 

<nav class="navbar navbar-inverse navbar-fixed-top navbar-nav"> 
    ... 
</nav> 

CSS

.navbar-nav { 
    top: 50px; 
} 

Answer 3

Sadece basitçe, nav'nuzun üst kısmında bir bölme ekleyin. Yani temelde böyle bir şey yapabilirsiniz.

HTML:

<div id="slogan">Slogan here</div> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">My top 5 music</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="nirvana.php">Nirvana</a></li> 
      <li><a href="gnr.php">Guns N'Roses</a></li> 
      <li><a href="beatles.php">The beatles</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
      <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

CSS:

.navbar-fixed-top { 
    top: 20px; 
    } 

    #slogan { 
    top: 0; 
    position: fixed; 
    } 

fiddle