Navbar скрытие DIV

Мой Navbar скрывается мой DIV, который должен быть над нейNavbar скрытие 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 для навигатора:

.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 класс и модифицировали его, изменила свое название и добавил код, но это действительно оленья кожа work.The navbar скрывает это, он не есть фон я сказал это, чтобы иметь или даже height

Я сделал navbar невидимым только для тестирования и, как вы можете видеть, что DIV находится под navbar и секция оранжевый тот, я сказал, что взял его css и изменил его.

источник

2017-01-07 evans

Пожалуйста, разместите более релевантный код ('CSS'). Мы не сможем выяснить проблему только из этого кода. Или еще лучше попробуй и сделай http://jsfiddle.net – Ionut

О, извините, я доберусь до него прямо сейчас! – evans

@lonut я добавил еще несколько CSS – evans

Я не думаю, что есть CSS решения кода. Вы можете проверить позицию прокрутки, чтобы сделать Navbar фиксированной и обратно к статическому электричеству, путем удаления или добавления 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

Я узнал, что я написал css title_top вместо заголовка, но теперь есть другая проблема, код фонового изображения вообще не работает, и текст переходит к оранжевой части, означающей, что он переходит в div выше? поднял скрипку – evans

Navbar скрытие DIV

ответ

Смежные вопросы