Đặt nội dung/biểu ngữ phía trên "Fixed Top Navbar"

Question

Tôi muốn đặt một biểu ngữ lên thanh điều hướng cố định hàng đầu cố định của Bootstrap. Mục đích của tôi là sử dụng thanh điều hướng làm điều hướng cho các hoạt động và đặt một biểu ngữ của dự án lên trên nó. Nó sẽ được mát mẻ nếu navbar là luôn luôn có trong trường hợp di chuyển, nhưng nó là tốt hơn cho banner biến mất.

Làm cách nào để đạt được điều đó, bất kỳ ví dụ nào?

Answer 1

Để đáp ứng với giải pháp của Skelly, tôi sẽ không khuyên bạn nên sử dụng hệ thống lưới của bootstrap để tạo kiểu cho tiêu đề của bạn. Lý do là trên thiết bị di động điều này sẽ tạo ra dòng không cần thiết tách hoặc khoảng cách không mong muốn ngay cả với việc sử dụng "ẩn-sm". Bạn có thể thấy điều này khi bạn đưa phần tử phù hợp gần hơn với phần tử bên trái trên trình duyệt của mình.

Thay vì sử dụng .. "nav-header"

<header class="masthead"> 
    <div class="container"> 
    <div class="nav-header"> 
     <h1> 
      <a href="#" title="scroll down for your viewing pleasure"> 
       Bootstrap 3 Layout Template 
      </a> 
      <p class="lead">Big Top Header and Fixed Sidebar</p> 
     </h1> 
     <div class="pull-right hidden-sm">  
      <h1> 
      <a href="#"><i class="glyphicon glyphicon-user"></i> 
       <i class="glyphicon glyphicon-chevron-down"></i> 
      </a> 
      </h1> 
    </div> 
    </div> 
</div> 
</header> 

Answer 2

Bí quyết là trong việc sử dụng affix, và sau đó bạn không nhất thiết cần phải đặt các biểu ngữ trong <header>.

css:

#topnavbar { 
    margin: 0; 
} 
#topnavbar.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

js:

$('#topnavbar').affix({ 
    offset: { 
     top: $('#banner').height() 
    } 
}); 

html:

<div class="container" id="banner"> 
    <div class="row"> 
     <h1> Your banner </h1> 
    </div> 
</div> 

<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar"> 
    ... 
</nav> 

Kiểm tra các demo in bootstrap 3.1.1.