Thêm hình ảnh tiêu đề trước navbar-fixed-top

Làm cách nào để thêm hình ảnh tiêu đề để hình ảnh tiêu đề xuất hiện trên đầu trang của thanh điều hướng cố định. Và khi người dùng cuộn xuống thanh điều hướng sẽ dính vào đầu?Thêm hình ảnh tiêu đề trước navbar-fixed-top

Tôi đã thử thêm nó vào vùng chứa nhưng nó không hoạt động như mong đợi.

Đây là mã của tôi cho đến thời điểm này.

<body> 
<header> 
    <img src="header/1024x100.png"> 
</header> 
<div class="container-fluid"> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#"></a> 
     <div class="nav-collapse collapse"> 
     <p class="navbar-text pull-right"> 
      Logged in as <a href="#" class="navbar-link">Username</a> 
     </p> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

Cảm ơn.

Nguồn

2013-02-27 John Doe

Bạn có thể vui lòng cho chúng tôi thấy một số mã hoặc một trang thử nghiệm không? – Shail

kiểm tra giải pháp. – Shail

JsFiddle với di chuyển nav check link

Lưu ý: Trong trường hợp hình ảnh của bạn nhỏ hơn kích thước màn hình, chèn đoạn mã này bên trong css của bạn

.masthead img{ 
width:100%; 
}

Các html nên trông giống như sau:

<div class="masthead"> 
<img src="http://placehold.it/940x150"/> 
</div> 
<!-- /container --> 
<div class="navbar affix-top" data-spy="affix" data-offset-top="150"> 
<div class="navbar-inner"> 
    <div class="container"> 
       <ul class="nav"> 
     <li class="active"><a href="#">Home</a> 

     </li> 
     <li><a href="#">Link</a> 

     </li> 
     <li><a href="#">Link</a> 

     </li> 
    </ul> 
    </div> 
    </div> 
</div> 
<!-- navbar --> 
<div class="container"> 
    <div class="row-fluid"> 
    <div class="span4"> 
    content goes here 
    </div> 
    </div> 
</div>

Nguồn

2013-02-27 07:34:50 Shail

Xin chào @Shail, nó không thực sự mượt mà. –

@JohnDoe Buddy Bạn đã không yêu cầu. Theo yêu cầu ban đầu của bạn, bạn muốn đặt hình ảnh tiêu đề ở đầu điều hướng. Và tôi nghĩ rằng giải pháp của tôi làm điều đó, phải không? liên quan đến cuộn .. bạn có được cuộn trơn tru bằng cách thêm jquery – Shail

@ JohnDoe cho tôi biết nếu bạn cần thêm trợ giúp – Shail

Thêm hình ảnh tiêu đề trước navbar-fixed-top

Trả lời

Các vấn đề liên quan