ブートストラップナビバが応答モードになっています

Question

ブートストラップテーマを使用して簡単なウェブサイトを作成しました。

私はそこにnavbarを作成しました。

レスポンシブモードではナビゲーションバーが折りたたまれますが、ページの右側にはスティックが付いているため、スクロールしてドロップダウンメニューをクリックする必要があります。

はまさにここに何が間違っているのですか？

.navbar-default { 
 
    background-color: white; 
 
    border-color: rgba(34, 34, 34, 0.05); 
 
    font-family: Roboto, Arial, sans-serif; 
 
    -webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    transition: all 0.35s; 
 
} 
 
.navbar-default .navbar-header .navbar-brand { 
 
    color: #424242; 
 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
} 
 
.navbar-default .navbar-header .navbar-brand:hover, 
 
.navbar-default .navbar-header .navbar-brand:focus { 
 
    color: #424242; 
 
} 
 
.navbar-default .navbar-header .navbar-toggle { 
 
    font-weight: 700; 
 
    font-size: 12px; 
 
    color: #424242; 
 
    text-transform: uppercase; 
 
} 
 
.navbar-default .nav > li > a, 
 
.navbar-default .nav > li > a:focus { 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    color: #424242; 
 
} 
 
.navbar-default .nav > li > a:hover, 
 
.navbar-default .nav > li > a:focus:hover { 
 
    color: #424242; 
 
} 
 
.navbar-default .nav > li.active > a, 
 
.navbar-default .nav > li.active > a:focus { 
 
    color: #424242 !important; 
 
    background-color: transparent; 
 
} 
 
.navbar-default .nav > li.active > a:hover, 
 
.navbar-default .nav > li.active > a:focus:hover { 
 
    background-color: transparent; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar-default { 
 
    background-color: transparent; 
 
    border-color: rgba(255, 255, 255, 0.3); 
 
    } 
 
    .navbar-default .navbar-header .navbar-brand { 
 
    color: #FFFFFF; 
 
    } 
 
    .navbar-default .navbar-header .navbar-brand:hover, 
 
    .navbar-default .navbar-header .navbar-brand:focus { 
 
    color: white; 
 
    } 
 
    .navbar-default .nav > li > a, 
 
    .navbar-default .nav > li > a:focus { 
 
    color: #FFFFFF; 
 
    } 
 
    .navbar-default .nav > li > a:hover, 
 
    .navbar-default .nav > li > a:focus:hover { 
 
    color: white; 
 
    } 
 
    .navbar-default.affix { 
 
    background-color: white; 
 
    border-color: #424242; 
 
    } 
 
    .navbar-default.affix .navbar-header .navbar-brand { 
 
    color: #424242; 
 
    font-size: 14px; 
 
    } 
 
    .navbar-default.affix .navbar-header .navbar-brand:hover, 
 
    .navbar-default.affix .navbar-header .navbar-brand:focus { 
 
    color: #424242; 
 
    } 
 
    .navbar-default.affix .nav > li > a, 
 
    .navbar-default.affix .nav > li > a:focus { 
 
    color: #424242; 
 
    } 
 
    .navbar-default.affix .nav > li > a:hover, 
 
    .navbar-default.affix .nav > li > a:focus:hover { 
 
    color: #424242; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- 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> Menu <i class="fa fa-bars"></i> 
 
     </button> 
 
     <a class="navbar-brand page-scroll" href="#page-top" style="padding-top:0px"> 
 
     <img style="width:150px;height:50px" src="img/logo.png"> 
 
     </a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right" style="font-family:Roboto"> 
 
     <li> 
 
      <a class="page-scroll" href="#aboutg" style="text-transform:capitalize">About G-Suite</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#portfolio" style="text-transform:capitalize">About Us</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#gform" style="text-transform:capitalize">Enquiry</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#pricing" style="text-transform:capitalize">Pricing</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#contact" style="text-transform:capitalize">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Answer 1

問題は、あなたの価格設定セクションで

あるモバイルデバイス

width: 250px; 

またはそれを作るための.tooltipx .tooltiptexty から幅を削除

width: auto;