2017-07-05 6 views
-4

AMブートストラップを使用してウェブサイトを作成しようとしていて、その上にヘッダーがあり、navbarがどこにあるのかによって、navbarが最初のページに表示されたヘッダーで固定されています唯一の上部に固定され、すべての私のナビゲーションバーのリンクは私のコードは、それが上部に固定滞在作るためにあなたのnavタグに.navbar-fixed-topを追加Navbarブートストラップウェブサイト

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Urbanic Home</title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 
    <div class="fad-top-bar" id="fad-top"> 
     <div class="container"> 
     <div class="top"> 
     <div class="pull-left" id="phone"> 
      <img src="img/phone.png" alt="phone"> 
      00000000000 
     </div> 
     <div class="pull-right" id="email"> 
      <img src="img/email.png" alt="email"> 
      @outlook.com 
     </div> 
     </div> 
     </div> 
    </div> 

    <div class="fad-top-menu"> 
     <div class="container"> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
      <button type="button" class=" collapsed navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false" aria-controls="myNavbar"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Urbanic Fadsoft Investments" title="Urbanic Fadsoft Investments"></a>  
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right" style="margin-top: 25px;"> 
       <li class="active"><a href="#fad-top">HOME</a></li> 
       <li><a href="#fad-about">ABOUT</a></li> 
       <li><a href="#fad-portfolio">PORTFOLIO</a></li> 
       <li><a href="#fad-blog">BLOG</a></li> 
       <li><a rel="follow" href="http://www.facebook.com/fadsoft Investments" 
       class="external-link" target="_parent">EXTERNAL</a></li> 
       <li><a href="#fad-contact">CONTACT</a></li> 
      </ul> 
      </div> 
     </nav> 
     </div> 
    </div> 
+0

あなたが持っている特定の問題について具体的な質問をされていません。 https://stackoverflow.com/help/asking – Rob

+0

ブートストラップサイト[これの例があります](http://getbootstrap.com/examples/navbar-fixed-top/)。 – BSMP

答えて

0

で同じページ上にあるナビゲーションバーを見たいです。 これをコード内で変更してください。ここで

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

はドキュメントです:navbar-fixed-top

関連する問題