2017-08-12 15 views
-1

私は小さなデバイスのためのnavbarを開くと、すべての作品が完全に動作しますが、ナビゲータにはウェブサイトのロゴと名前が表示されます。 http://www.responsinator.com/?url=http%3A%2F%2F176.9.117.220%3A8282%2Ftrail_menu_8_8_2017%2520-%2520Copy.html ありがとう:出力を知るには、このリンクをチェックし、コード携帯電話のナビゲーションバーのサイズを増やす方法はありますか?

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
     <title>Webmap Cities</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
     body { overflow: hidden; } 
    .navbar-offset { margin-top: 50px; } 
      #map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; } 
      #map .ol-zoom { font-size: 1.2em; } 

      .zoom-top-opened-sidebar { margin-top: 5px; } 
      .zoom-top-collapsed { margin-top: 45px; } 
    .mini-submenu{ 
      display:none; 
      background-color: rgba(255, 255, 255, 0.46); 
      border: 1px solid rgba(0, 0, 0, 0.9); 
      border-radius: 4px; 
      padding: 9px; 
      /*position: relative;*/ 
      width: 42px; 
      text-align: center; 
      } 

      .mini-submenu-left { 
      position: absolute; 
      top: 60px; 
      left: .5em; 
      z-index: 40; 
      } 
      .mini-submenu-right { 
      position: absolute; 
      top: 60px; 
      right: .5em; 
      z-index: 40; 
      } 

      #map { z-index: 35; } 

      .sidebar { z-index: 45; } 

      .main-row { position: relative; top: 0; } 

      .mini-submenu:hover{ 
      cursor: pointer; 
      } 

      .slide-submenu{ 
      background: rgba(0, 0, 0, 0.45); 
      display: inline-block; 
      padding: 0 8px; 
      border-radius: 4px; 
      cursor: pointer; 
      } 

     @media (min-width: 768px) and (max-width: 991px) { 
     .navbar-nav .open .dropdown-menu { 
      position: static; 
      float: none; 
      width: auto; 
      margin-top: 0; 
      background-color: transparent; 
      border: 0; 
      -webkit-box-shadow: none; 
      box-shadow: none; 
      z-index:99; 
     } 
     .navbar-nav .open .dropdown-menu > li > a { 
      line-height: 20px; 
     } 
     .navbar-nav .open .dropdown-menu > li > a, 
     .navbar-nav .open .dropdown-menu .dropdown-header { 
      padding: 5px 15px 5px 25px; 
     } 
     .dropdown-menu > li > a { 
      display: block; 
      padding: 3px 20px; 
      clear: both; 
      font-weight: normal; 
      line-height: 1.42857143; 
      color: #333; 
      white-space: nowrap; 
     } 
     .navbar-header { 
      float: none; 
     } 
     .navbar-toggle { 
      display: block; 
     } 
     .navbar-collapse { 
      border-top: 1px solid transparent; 
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
     } 
     .navbar-collapse.collapse { 
      display: none!important; 
     } 
     .navbar-nav { 
      float: none!important; 
      /*margin: 7.5px -15px;*/ 
      margin: 7.5px 50px 7.5px -15px 
     } 
     .navbar-nav>li { 
      float: none; 
     } 
     .navbar-nav>li>a { 
      padding-top: 10px; 
      padding-bottom: 10px; 
     } 
     .navbar-text { 
      float: none; 
      margin: 15px 0; 
     } 
     /* since 3.1.0 */ 
     .navbar-collapse.collapse.in { 
      display: block!important; 
     } 
     .collapsing { 
      overflow: hidden!important; 
     } 
    } 
    .navbar-brand 
    { 
    font-size:100% !important; 
    } 
    </style> 
    <body onload="mumbai();"> 
    <div class="container"> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 
      <a class="navbar-brand" href="#"><span><img style="height:30px;width:30px"src="http://cdn.9appsdownloading.com/group1/M01/35/1C/poYBAFcpqU-AFa5CAAAMm35WLrc217.png" text=""></span><h4 style="display:inline;color:red">Urban Growth in Mumbai Metropolitan Area 1975-2014</h4></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Mumbai</a></li> 
         <li class="divider"></li> 
         <li><a href="Delhi.html">Delhi</a></li> 
         <li class="divider"></li> 
         <li><a href="Bengaluru.html">Bengaluru</a></li> 
        </ul> 
     </div> 
     </div> 
    </nav> 
    </body> 
    </html> 

の下に罰金してください。

+0

のために役立つことを願っていますか? –

答えて

1

ブラックボックスヘッダーの自動高さを指定するだけです。 100vwの幅を与えます。内容はボックスに記載する必要があり、ナビコンはボックスに入れる必要はありません。次に、あなたのボックスにこれを適用してください:(表示:フレックス;ジャスティフィケーション:センター;アライメントアイテム:センター;)ナビコンの位置を決めるには、(位置:絶対;上:5px;右:5px;)を使用します。最後に、テキストに少し余白を追加するだけで問題ありません。

ご質問がある場合は、私にお尋ねください。

私は、これはあなたが背の高いヘッダを取得することを意味し、「ナビゲーションバーのサイズを大きくする」ことによって、あなた

+0

ありがとうLukas。 –

関連する問題