모바일 웹 앱에서 navbar가 작동하지 않습니다.

Question

페이지 스크롤이있는 간단한 nabber가 있습니다. 그것은 바탕 화면에서 작동하지만 모바일 웹 응용 프로그램에서 볼 때 메뉴 또는 토글 탐색을 표시하지 않습니다. 모바일 조회와 관련하여 무언가를 놓치고 있지만 확실하지는 않습니다. 스택 오버플로에서 몇 개의 게시물을 확인했지만 도움이되지 않았습니다. 우선 먼저 jQuery를로드 있는지 확인하고 그 이후의 자바 스크립트를 부트 스트랩

<nav class="navbar navbar-default navbar-fixed-top" 
style="background-color: #757470; padding-left: 0px; margin: 0px; height: 64px;"> 
<div class="container" id="menu"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
      data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" 
     id="bs-example-navbar-collapse-1" 
     style="font-family: Lato; font-size: 12px;" class="gatewayNav"> 
     <ul class="nav navbar-nav" 
      style="padding-top: 0px; padding-left: 0px;"> 
      <li><div style="" class="gatewayLogo"></div> 
       <h1 style="padding-left: 200px;"></h1></li> 
      <li class="dropdown"><a data-toggle="tab" href="#home" 
       id="homeMenu" prevent-default="" scroll-to="home" 
       style="border: medium none; padding-top: 10px; padding-bottom: 0px;"><b 
        style="color: white; font-size: 13px;">HOME</b><br> </a></li> 
      <li class="dropdown"><a data-toggle="tab" href="#startups" 
       prevent-default="" scroll-to="startups" 
       style="border: medium none; padding-top: 10px; padding-bottom: 0px; color: white;" 
       id="startupMenu"><b style="color: white; font-size: 13px;">STARTUPS</b> 
        <br> </a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

아래의 메뉴 바의 코드를 참조하십시오. 이들이 올바르게로드 되었다면 문제는 몇 가지 다른 문제 일 수 있습니다. 당신이 토글 버튼을 보지 못한다면 토글 버튼을위한 커스텀 CSS가있을 수 있습니다. 버튼에 <span class="icon-bar"></span> 요소가 없으면 토글 버튼이 표시되지 않을 수 있습니다. 다음으로 보게되는 것은 당신이 navbar를위한 높이를 설정했다는 것입니다. 전환 버튼이 표시되고 클릭 한 후 흰색 페이지가 있기 때문에 드롭 다운이 표시되지 않습니다. 높이를 지정하는 대신 원하는 높이를 얻으려면 패딩을 추가하는 것이 좋습니다.

여기는 네비게이션이 작동하는 바이올린입니다. 부트 스트랩 3의 네비게이션이 50px이기 때문에 7px의 위쪽 및 아래쪽 패딩을 추가 했으므로 64px로 가려면 위쪽과 아래쪽에 7을 더할 수 있습니다. 그런 다음 아이콘 막대를 토글 버튼에 추가하여 볼 수 있습니다. 내가 말했듯이 jquery를 먼저로드 한 후 js 파일을 부트 스트랩합니다. 여기에 다음 <li>에있는 드롭 다운 클래스를 추가 할 이유가 없다 당신이 당신의 메뉴 바에서 <li> 각 요소에 대한 드롭 다운 메뉴가하지 않을 경우 바이올린 데모 JsFiddle Navbar Fix

PS입니다. 또한 링크를 클릭 할 때 탭을 토글하거나 섹션으로 스크롤하면 모든 페이지 나누기와 이상한 패딩이 일부 문제를 일으킬 수 있습니다. 이 답변 뒤에는 의견을 남겨주세요.이 전체 마크 업과 충돌하는 많은 문제가있는 것처럼 보이기 때문에이 모든 것을 달성하기 위해 노력하고있는 것을 이해할 수 있습니다. 그리고 나는 단지 당신이 무엇을하려고하는지 이해하려고 노력하고 있습니다. 아마 내가 도울 수있어.