고정 된 내비게이션 문제

Question

두 개의 맞춤형 nav 메뉴가 가운데에 로고가있는 슬라이더 아래에 놓이기를 원하는 클라이언트가 있습니다. 또한 스크롤 할 때 메뉴가 고정되기를 원합니다. 나는 이것을 실행했고 놀랍게도 작동합니다. 여기에 링크가 있습니다 ... DEMO

여기에 수수께끼가 있습니다. 이 장치는 1200px 이상의 모든 장치에서 훌륭하게 보이지만, 저의 삶에서이 장치를 그 아래의 장치에 적합하게 만드는 방법을 알 수는 없습니다. 나는 거의 모든 코드에 미디어 쿼리를 추가하고 주목했다. 나는 이것을 제외하고 응답하는 페이지에 다른 모든 것을 만들었습니다. 어쩌면 고정 메뉴를 제거하는 것은 더 작은 장치를위한 선택권입니까 ??? 어떤 도움이라도 대단히 감사하겠습니다. 다음 코드는

HTML

<div id="nav-container"> 

<div id="nav-box" class="animated fadeInDown"> 

<a class="btn rounded butter" href="#">Start Dinating</a> 
<a class="btn rounded butter" href="#">Follow Us</a> 
<a class="btn rounded butter" href="#"><i class="icon-facebook"></i></a> 
<a class="btn rounded butter" href="#"><i class="icon-twitter"></i></a> 
<a class="btn rounded butter" href="#"><i class="icon-instagram"></i></a> 
<a class="list-group-item" href="#"></a> 
<img src="http://www.jshuadvd.com/test/wp-content/uploads/2014/11/logo.png" alt="Dinate" width="199" height="204"> 
<a class="btn2 rounded butter" href="#">Merchandise</a> 
<a class="btn2 rounded butter" href="#"><i class="icon-lock"></i>Log In/Register</a> 
<a class="btn2 rounded butter" href="#"><i class="icon-shopping-cart"></i>View Tab</a> 

</div> 

<nav id="second-nav"> 

<div id="nav-left"> 
    <ul> 
    <li><a href="#">HOME </a></li> 
    <li><a href="#">OUR RESTAURAUNTS </a></li> 
    <li><a href="#">DINATING EVENTS </a></li> 
    </ul> 
</div> 

<div id="nav-right"> 
    <ul> 
    <li><a href="#">CONTACT </a></li> 
    <li><a href="#">BLOG </a></li> 
    <li><a href="#">CHARITES </a></li> 
    </ul> 
</div> 

</nav> 
</div> 
</div> 

CSS

.... BTW 나는 코드가 실수이며, 풍부, 어떤 제안이 그것을 청소하실 수 있습니다 알고 ....입니다

  #nav-container { 
       height: 180px; 
       text-decoration: none; 
       font-size: 15px; 
       font-family: helvetica, arial, sans-serif; 
       text-transform: uppercase; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-container { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       font-size: 12px; 
       } 
      } 


      #nav-box { 
       position: relative; 
       background: #222; 
       text-align: center; 
       width: 100%; 
       height: 50px; 
       z-index: 2000; 
       padding-top: 0px; 
       padding-bottom: 5px; 
       line-height: 0; 

      } 


      @media screen and (max-width: 1200px){ 
       #nav-box { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 


      #nav-box img { 
       position: absolute; 
       top: 0; 
       left: 50%; 
       margin-left: -100px; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-box img { 
       display: none; 

       } 

      } 



      /* --------------------- BUTTTONS ------------------- */ 



      .btn { 
       overflow: hidden; 
       position: relative; 
       display: inline-block; 
       height: 2em; 
       line-height: 2em; 
       padding: 0 1em; 
       left: -7.5%; 
       margin: 10px 30px 0 0; 
       -moz-transition: color 400ms; 
       -o-transition: color 400ms; 
       -webkit-transition: color 400ms; 
       transition: color 400ms; 
       } 


      @media screen and (max-width: 1200px){ 
       .btn { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       font-size: auto; 
       } 

      } 


      .btn2 { 
       overflow: hidden; 
       position: relative; 
       display: inline-block; 
       height: 2em; 
       line-height: 2em; 
       padding: 0 1em; 
       left: 9.8%; 
       margin: 10px 30px 0 0; 
       -moz-transition: color 400ms; 
       -o-transition: color 400ms; 
       -webkit-transition: color 400ms; 
       transition: color 400ms; 
      } 


      @media screen and (max-width: 1200px){ 
       .btn2 { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       font-size: auto; 
       } 

      } 


      .btn:before { 
       content: ''; 
       position: absolute; 
       z-index: -1; 
       height: 0%; 
       width: 100%; 
       bottom: 0; 
       left: 0; 
       -moz-transition: height 100ms; 
       -o-transition: height 100ms; 
       -webkit-transition: height 100ms; 
       transition: height 100ms; 
       } 

      @media screen and (max-width: 1200px){ 
       .btn:before { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 


      .btn2:before { 
       content: ''; 
       position: absolute; 
       z-index: -1; 
       height: 0%; 
       width: 100%; 
       bottom: 0; 
       left: 0; 
       -moz-transition: height 100ms; 
       -o-transition: height 100ms; 
       -webkit-transition: height 100ms; 
       transition: height 100ms; 
       } 


      @media screen and (max-width: 1200px){ 
       .btn2:before { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 



      .btn:hover { 
       color: #A4C739; 
       border-color: #A4C739; 
       } 


      .btn2:hover { 
       color: #A4C739; 
       border-color: #A4C739; 
       } 


      .btn:hover:before { 
       height: 100%; 
       } 


      .btn2:hover:before { 
       height: 100%; 
      } 

      .rounded { 
       border-radius: 2em; 
      } 

      @media screen and (max-width: 1200px){ 
       .rounded { 
       box-sizing: border-box; 
       border-radius: auto; 
       width:auto; 

       } 

      } 

      .butter { 
       color: white; 
       border: 3px solid white; 
       border-radius: 2em; 
      } 

      @media screen and (max-width: 1200px){ 
       .butter { 
       box-sizing: border-box; 
       border-radius: auto; 
       width:auto; 

       } 

      } 


      .butter:before { 
       background-color: #A4C739; 
      } 

      @media screen and (max-width: 1200px){ 
       .butter:before { 
       box-sizing: border-box; 
       width:auto; 

       } 

      } 

      .butter:hover { 
       color: white; 
       border-color: white; 
      } 



      /* ---------------- SOCIAL NAV ICONS ------------------ */ 

      .icon-facebook { 
       margin-left: -10px; 
       margin-right: -10px; 
      } 

      @media screen and (max-width: 1200px){ 
       .icon-facebook { 
       box-sizing: border-box; 
       width: auto; 
       } 

      } 

      .icon-twitter { 
       margin-left: -10px; 
       margin-right: -10px; 
      } 

      @media screen and (max-width: 1200px){ 
       .icon-twitter { 
       box-sizing: border-box; 
       width:auto; 
       } 

      } 

      .icon-instagram { 
       margin-left: -10px; 
       margin-right: -10px; 
      } 

      @media screen and (max-width: 1200px){ 
       .icon-instagram { 
       box-sizing: border-box; 
       width: auto; 
       } 

      } 


      /* ---------------- BUTTON ICONS ------------------ */ 

      .icon-shopping-cart { 
       margin-right: 6px; 
       margin-left: -4px; 
      } 

      @media screen and (max-width: 1200px){ 
       .icon-shopping-cart { 
       box-sizing: border-box; 
       width:auto; 
       } 

      } 

      .icon-lock { 
       margin-right: 5px; 
       margin-left: -4px; 
      } 


      @media screen and (max-width: 1200px){ 
       .icon-lock { 
       box-sizing: border-box; 
       width:auto; 
       } 

      } 


      .clear { 
       clear: both; 

       } 


      /* ---------------- BUTTONS END ------------------ */ 


      /* ---------------- SECOND NAV ------------------- */ 
       #second-nav { 
       width: 100%; 
       text-align: center; 
       font-size: 15px; 
       font-family: helvetica, arial, sans-serif; 
       text-transform: uppercase; 
       z-index: 999; 
       } 



      @media screen and (max-width: 1200px){ 
       #second-nav { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       font-size: 12px; 
       } 

      } 


      /* ----------------- LEFT NAV ------------------- */ 


      #nav-left { 
       z-index: 1; 
       margin-bottom: -92px; /* nav height */ 
       padding: 5px 60px; 
       background: #000; 
       transition: box-shadow 400ms; 
      } 

      @media screen and (max-width: 1200px){ 
       #nav-left { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 

      #nav-left ul { 
       margin:0 auto; 
       width:100%; 
       list-style: none; 
       *zoom: 1; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-left ul { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 

      #nav-left ul:after { 
       clear:both; 
       display: table; 
       content: ""; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-left ul:after { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 


      #nav-left li { 
       float: left; 
       text-align: center; 
       padding: 0 45px; 
       -webkit-border-radius: 4px; 
       -moz-border-radius: 4px; 
       border-radius: 4px; 
       list-style: none; 
       border-left:1px solid #222; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-left li { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       border: none; 
       } 

      } 


      #nav-left li:first-child { 
       border-left: 0; 
       padding-left: 0; 
      } 


      #nav-left a { 
       position: relative; 
       display:block; 
       color: #fff; 
       padding: 40px 0; 
       line-height: 1px; 
       text-decoration: none; 
       -moz-border-radius: 4px; 
       -webkit-border-radius: 4px; 
       border-radius: 4px; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-left a { 
       box-sizing: border-box; 
       width:100%; 
       border: none; 
       } 

      }  

       #nav-left a:hover { 
       color: #A4C739; 
      } 


      .clear { 
      clear: both; 

      } 


      /* --------------- RIGHT NAV ---------------- */ 

      #nav-right { 
       z-index: 1; 
       margin-bottom: -72px; /* nav height */ 
       padding: 0 120px; 
       background: #000; 
       transition: box-shadow 400ms; 
      } 

      @media screen and (max-width: 1200px){ 
       #nav-right { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 


      #nav-right ul { 
       margin:0 auto; 
       width:100%; 
       list-style: none; 
       *zoom: 1; 
      } 

      @media screen and (max-width: 1200px){ 
       #nav-right ul { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 

      #nav-right ul:after { 
       clear:both; 
       display: table; 
       content: ""; 
      } 

      @media screen and (max-width: 1200px){ 
       #nav-right ul:after { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       } 

      } 

      #nav-right li { 
       float: right; 
       text-align: center; 
       padding: 0 45px ; 
       -webkit-border-radius: 4px; 
       -moz-border-radius: 4px; 
       border-radius: 4px; 
       list-style: none; 
       border-right:1px solid #222; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-right li { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       border: none; 
       } 

      } 

      #nav-right li:first-child { 
       border-right: 0; 
       padding-right: 0; 

      } 


      #nav-right a { 
       position: relative; 
       display:block; 
       color: #fff; 
       padding: 40px 10px; 
       line-height: 1px; 
       text-decoration: none; 
       -moz-border-radius: 4px; 
       -webkit-border-radius: 4px; 
       border-radius: 4px; 
      } 


      @media screen and (max-width: 1200px){ 
       #nav-right a { 
       box-sizing: border-box; 
       width:100%; 
       text-align: center; 
       border: none; 
       } 

      } 

       #nav-right a:hover { 
       color: #A4C739; 
      /* -moz-box-shadow: 0 0 0 1px #fff; 
       -webkit-box-shadow: 0 0 0 1px #fff; 
       box-shadow: 0 0 1px 1px #fff; */ 
      }  


      .fixed { 
        position:fixed !important; 
       } 



      .clear { 
       clear: both; 
      } 

JS/JQUERY

<!------------Begin JavaScript Functions for Fixed Header--------> 

    <script type='text/javascript'> 
    jQuery(document).ready(function($){ 
    var aboveHeight = $('#slider').outerHeight(); 
    $(window).scroll(function(){ 
     if ($(window).scrollTop() > aboveHeight){ 
     $('#nav-box').addClass('fixed').css('top','0').next().css('margin-top','55px'); 
     } else { 
     $('#nav-box').removeClass('fixed').next().css('margin-top','0'); 
     } 

    }); 
     $(window).scroll(function(){ 
     if ($(window).scrollTop() > aboveHeight){ 
     $('#second-nav').addClass('fixed').css('top','0').next().css('margin-top','40px'); 
     } else { 
     $('#second-nav').removeClass('fixed').next().css('margin-top','0'); 
     } 

    }); 
    }); 


    </script> 

    <!------------End JavaScript Functions for Fixed Header----------> 

012,

Answer 1

표준 미디어 쿼리로 시작하는 것이 좋습니다. 또한 상황에 따라 최대 너비 또는 최대 장치 너비를 사용할 수 있습니다. 모든 쿼리가 1200px (대형 형식)를 넘는 최대 너비 인 것 같습니다. 네비게이션이 어떻게 적용되는지 각 레이아웃에 대해 알아야합니다. 고정 레이아웃의 경우 각 요소를 비례 적으로 줄여야합니다. 예를 들어 너비가 1200 픽셀 인 행에 5 개의 요소가있는 경우 600px 모바일 화면의 경우 각 너비를 절반으로 줄입니다.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* iPads (portrait and landscape) Styles */ 
} 

@media only screen 
(max-width : 600px) { 
/* Mobile Only Styles */ 
} 

상세 정보 : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

당신이 트위터 부트 스트랩 모바일 첫 번째 방법을 보면 모바일이 아닌 미디어 쿼리 내부의 기본 CSS는 (이기 때문에, 서로 다른 폭의 장치에 대한 이러한 주요 중단 점을) :

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @768px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... } 

http://getbootstrap.com/css/

당신을 위해,하지만 당신이 원하는 것 max-width를 빼기 방식으로 사용하십시오. 최대 너비를 알고있는 경우 각 탐색 요소의 크기를 비례 적으로 조정할 수 있습니다.

http://scotch.io/quick-tips/css3-quick-tips/default-sizes-for-twitter-bootstraps-media-queries

/* Large Devices, Wide Screens */ 
    @media only screen and (max-width : 1200px) { 
     .butter.btn-1 {width:128px; font-size: 12px;} 

    } 

    /* Medium Devices, Desktops */ 
    @media only screen and (max-width : 992px) { 
     .butter.btn-1 {width:105px; font-size: 10px;} 
    } 

    /* Small Devices, Tablets */ 
    @media only screen and (max-width : 768px) { 
     .butter.btn-1 {width:80px; font-size: 8px;} 
    } 

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) { 
     .butter.btn-1 {width:50px; font-size: 6px;} 
    } 

부트 스트랩은 HD 첫번째 디자인과 다른 모바일 첫 번째 방법을 취한다. 그래서, 당신은 당신의 1200+ 해상도가 기본이고 다른 모든 것들이 수정 될 필요가 있다고 말하는 것입니다. 나는 이것이 이상적인 것이 아니라 내가 추천하는 것이 아니라는 것을 이해하지만, 당신은 모든 것을 바꾸고 싶지 않다고 말했기 때문에 이것은 단지 일시적인 해결책 일 뿐이다.

궁극적으로 고정 된 탐색 버튼이 너무 작을 것 같습니다. 고려해야 할 또 다른 사항은 픽셀 너비 대신에 너비를 사용하는 것입니다. 다시 말하지만, 부트 스트랩 프레임 워크는 이미 많은 것을 처리해 주므로 크기가 이미 상대적입니다.