부트 스트랩 navbar-fixed-top 작동하지 않음

Question

내 사이트에 부트 스트랩의 navbar-top-fixed을 사용하고 있지만 작동하지 않는 것 같습니다. 아래로 스크롤하면 상단에 고정되지 않습니다. 여기

내 HTML 코드입니다 :

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="gdgt-menu"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="gdgt-logo"> 
     <a class="navbar-brand" href="<?php echo get_site_url(); ?>" rel="bookmark">brand</a> 
     </div> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="nav-items collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <!--my menu is here--> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

그리고 여기에 CSS는 다음과 같습니다

.gdgt-menu{ 
    padding-right: 10%; 
    padding-left: 10%; 
} 

@media only screen and (min-width : 200px) and (max-width : 768px) { 

    .navbar{ 
    margin-bottom: 0px !important; 
    } 

    .navbar-collapse { 
    width: 100%; 
    } 

    .menu-header-container{ 
    width: 100%; 
    } 

    .gdgt-menu{ 
    padding-right: 0% !important; 
    padding-left: 0% !important; 
    } 

    #bs-example-navbar-collapse-1 .current-menu-item a { 
    padding-right: 100% !important; 
} 



} 

@media only screen and (min-width : 200px) and (max-width : 768px) { 

    .featured-content{ 
    width: 100%; 
    margin-right: 0px !important; 
    margin-left: 0px !important; 
    } 


} 
@media only screen and (min-width : 768px) and (max-width : 1010px) { 

    .gdgt-menu{ 
    padding-right: 0% !important; 
    padding-left: 0% !important; 
    } 

    .nav-items{ 
    width: 85% !important; 
    } 

} 


.nav-items{ 
    width: 70%; 
    float: right; 
} 


.navbar{ 
    height: 60px; 
    display: block; 
    position: relative; 
} 

.menu{ 
    margin: 0px !important; 

    padding-left: 0px !important; 
} 

.menu-header-container{ 
    float: right; 
} 

@media only screen and (min-width : 200px) and (max-width : 768px) { 

    .menu-header-container{ 
    background-color: #2c3e50; 
    } 

    .menu li{ 
    width: 100% !important; 
    } 
} 
.menu li{ 
    list-style-type: none; 
    line-height: 60px; 
    width: auto; 
    float: left; 
    transition: all 0.2s ease-in-out; 
} 

.menu li:hover{ 
    background-color: #34495e; 
} 

.menu a{ 
    color: #fff; 
    text-decoration: none; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

이 문제의 원인이 무엇의 어떤 생각? 왜 이런 일이 일어나고 있는지 나는 잘 모르겠습니다. 그러나 @media이 원인 인 것 같습니다.

도와주세요 :) 당신은 부트 스트랩에게 .fixed-top-navbar의 기본 위치를 재정의

Answer 1

. 코드에서 bootsrap.css

.navbar-fixed-top, 
.navbar-fixed-bottom { 
    position: fixed; /* <-- Look here */ 
    right: 0; 
    left: 0; 
    z-index: 1030; 
} 

에서

:

.navbar{ 
    height: 60px; 
    display: block; 
    position: relative; /* <-- Oh dear */ 
} 

Answer 2

변경 코드 : 아마 당신은`.navbar {위치를 설정하고 있기 때문에

.navbar { 
    height: 60px; 
    display: block; 
    position: fixed; 
}