ナビゲーションバーがあるべき

私のナビゲーションバーには、私のdiv要素を隠しているのdivを隠して自分のことナビゲーションバーがあるべき

ない完全なレプリカを超えるが、ここでfiddle

HTMLです：用

<!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"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Burger Corner</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/scrolling-nav.css" rel="stylesheet"> 
    <link rel="icon" href="images/favicon.png" type="image/x-icon"> 

</head> 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
    <!-- NAVBAR --> 
    <nav class="navbar navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
<!--    <a class="navbar-brand page-scroll" href="#page-top">Burger Corner</a>--> 
       <img src="images/logo.png" width="90" height="60"> 
      </div> 

      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav navbar-right main-nav"> 
        <li class="hidden"><a class="page-scroll" href="#page-top"></a></li> 
        <li><a class="page-scroll color_animation" href="#intro">Welcome</a></li> 
        <li><a class="page-scroll color_animation" href="#services">About us</a></li> 
        <li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li> 
        <li><a class="page-scroll color_animation" href="#contact">Contact us</a></li> 
        <li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <!-- Intro Section --> 
    <section class="top-title"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Burger Corner</h1> 
       </div> 
      </div> 
     </div> 
    </section> 

    <section id="intro" class="intro-section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Welcome section</h1> 
       </div> 
      </div> 
     </div> 
    </section> 

    <!-- About Section --> 
    <div id="wall_1" class="image"></div> 
    <section id="about" class="about-section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>About Section</h1> 
       </div> 
      </div> 
     </div> 
    </section>

CSS問題のあるdivと動作するもの：

.top_title{ 
    font-family: 'Playball', cursive; 
/* background-image: url(../images/intro.jpg) no-repeat center center;*/ 
    background-size: cover; 
    width: 100%; 
    height: 100px; 
    background-color:#990000; 
    text-align:center; 
    padding-top: 150px; 
} 

.intro-section { 
    height: 100%; 
    padding-top: 150px; 
    text-align: center; 
    background: #fff; 
    z-index: 1; 
}

CSS for the navbar：

.color_animation { 
    text-decoration: none; 
    margin-right: -5px; 
    margin-left: -5px !important; 
    color: white !important; 
    -webkit-transition: color 0.3s ease-out; 
    -moz-transition: color 0.3s ease-in-out; 
    -o-transition: color 0.3s ease-in-out; 
    -ms-transition: color 0.3s ease-in-out; 
    transition: color 0.3s ease-in-out; 
} 
.color_animation:hover{ 
    color: #990000 !important; 
}  

.main-nav a { 
     font-size: 20px; 
     font-weight: 700; 
     text-decoration: none; 
     color: #000; 
     display: block; 
     text-align: center; 
     padding: 2px 0; 
     transition: color 0.3s ease-in-out; 
} 

.main-nav { 
     padding: 0; 
     /*margin: auto 0 auto;*/ 
}  

    li{ 
    color: white !important; 
    word-spacing: 5px !important; 
}

エクストラCSS：

body { 
    width: 100%; 
    height: 100%; 
} 

html { 
    width: 100%; 
    height: 100%; 
} 

@media(min-width:767px) { 
    .navbar { 
     padding: 20px 0; 
     -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     transition: background .5s ease-in-out,padding .5s ease-in-out; 
    } 

    .top-nav-collapse { 
     padding: 0; 
    } 
}

は私もintro-sectionクラスを使用してみましたし、それを変更し、社名を変更し、いくつかのコードを追加しましたが、それは本当にdoesntのwork.The navbarはそれを隠し、それが持っているdoesntの背景私は持っていることを告げたり、height

は、私はちょうどテストのために、あなたはdiv要素がnavbar下にあり、オレンジ色の部分がある見ることができるようnavbarが見えないように1つは、私はそのcssを取ってそれを変更したと言った。

出典

2017-01-07 evans

関連するコード（ 'CSS'）を投稿してください。私たちは、このコードから問題を理解することはできません。またはもっとよく試してみてくださいhttp://jsfiddle.net – Ionut

ああ、私は申し訳ありません、私は今すぐにそれを得るでしょう！ – evans

@ lonut私はもう少しCSSを追加しました – evans

私はあなたのコードへCSS解決策があるとは思いません。あなたはこのように、navbar-fixed-topクラスを削除または追加することによって、バック静的にナビゲーションバーが固定させるためのスクロール位置を確認することができ：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 50) { 
    $('.navbar').addClass('navbar-fixed-top'); 
    } 
    if ($(window).scrollTop() < 51) { 
    $('.navbar').removeClass('navbar-fixed-top'); 
    } 
});

FIDDLEを更新しました。

出典

2017-01-07 20:01:22 Ionut

私はtitle-topではなくtitle_topを書きましたが、別の問題があります。背景画像コードはまったく動作せず、テキストはオレンジ色の部分に移動し、上のdivに移動します。は、 – evans

ナビゲーションバーがあるべき

答えて

関連する問題