モバイルウェブアプリでnavbarが動作しません

Question

私はページスクロールを使用した簡単な語彙を持っています。それはデスクトップで動作しますが、モバイルWebアプリで見ると、メニューやトグルナビゲーションは表示されません。私は、モバイルビューに関しては何かが不足していると確信していますが、わかりません。私はスタックオーバーフローからの投稿のカップルをチェックしたが、助けにはならなかった。まず、あなたが最初にjqueryのをロードしていることを確認すると、その後のJavaScriptをブートストラップ

<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

の下にナビゲーションバーコードスニペットを参照してください。これらが正しくロードされていれば、問題はいくつかの異なる問題になる可能性があります。 1つは、トグルボタンが表示されていない場合、トグルボタンにカスタムのCSSが表示されていて、ボーダーや境界線がないことです。また、ボタンの中に<span class="icon-bar"></span>要素がないと、トグルボタンが表示されないことがあります。次に見えるのは、あなたがnavbarの高さを設定していることです。トグルボタンが表示されている場合は、白いページがあるためドロップダウンが表示されません。高さを与えるのではなく、希望する高さになるようにパディングを追加することを検討してください。

ここでは、あなたのnavbarが働いています。ブートストラップ3のナビバーは50pxなので、トップとボトムの7pxを追加しました.64pxになるためには、トップとボトムに7を追加するだけです。次に、アイコンバーをトグルボタンに追加して、あなたがそれを見ることができるようにしました。あなたがjqueryをロードしてからjsファイルをブートストラップすることを確かめました。ここではフィドルデモJsFiddle Navbar Fix

PSあなたのナビゲーションバーであなたの<li>要素ごとにドロップダウンメニューを持っているつもりされていない場合は、その後<li>にドロップダウンクラスを追加する理由はないです。また、リンクをクリックしたときにタブを切り替えたり、セクションをスクロールしたりすると、改ページや奇妙なパディングが問題を引き起こす可能性があります。この回答の後にコメントを残しておいてください。このマークアップ全体と矛盾する問題がたくさんあるように見えるので、これで達成しようとしていることを理解することができます。多分私は助けることができます。