メニューがモバイル用に機能しない

私のサイトは最終的にどのように見たいのですか？私はテンプレートを新しくインストールしました。モバイル経由で見るとメニューは表示されません。これを修正することは可能ですか、新しいテンプレートを検索する必要はありますか？メニューがモバイル用に機能しない

サイトはhttp://welshmediation.com/です。

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="santa barbara mediator"> 
    <meta name="Jennie Walsh Mediation" content=""> 

    <title>Jennie K. Welsh Mediation</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="/css/bootstrap.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="/css/small-business.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="/js/html5shiv.js"></script> 
     <script src="/js/respond.min.js"></script> 
    <![endif]--> 

    <style type="text/css"> 
    .auto-style1 { 
     font-size: large; 
    } 
    .auto-style3 { 
     text-align: center; 
     font-size: large; 
    } 
    .auto-style5 { 
     font-size: medium; 
    } 
    .auto-style13 { 
     font-size: large; 
     color: #F17411; 
    } 
    .auto-style17 { 
     width: 1170px; 
     text-align: center; 
     margin-left: auto; 
     margin-right: auto; 
     padding-left: 15px; 
     padding-right: 15px; 
    } 
    .auto-style18 { 
     float: left; 
     text-align: center; 
    } 
    .auto-style19 { 
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 
    font-size: medium; 
    text-align: center; 
} 
    .auto-style20 { 
    width: 1170px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    font-size: small; 
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 
} 
    </style> 

</head> 
<body> 
<body style="background-color: #Fcfad3"> 

    <div> 

    <!-- Navigation --> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #848482; left: 0; right: 0; top: 0; height: 80px; "> 
     <div class="auto-style17"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="auto-style18"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"> 
        <div> 
        &nbsp;</div> 
       </a></div> 
      <div style="height: 50px"> 
      <!-- 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"> 
        <li> 
         <a href="http://welshmediation.com/"> 
         <span class="auto-style13">HOME</span></a> 
        </li> 
<li> 
         <a href="http://welshmediation.com/whymediation.html"> 
         <span class="auto-style13">WHY MEDIATE?</span></a> 
        </li> 

        <li> 
         <a href="http://welshmediation.com/howiwork.html"> 
         <span class="auto-style13">HOW I WORK</span></a> 
        </li> 
        <li> 
         <a href="http://welshmediation.com/services.html"> 
         <span class="auto-style13">MEDIATION SERVICES</span></a> 
        </li> 
        <li> 
         <a href="http://welshmediation.com/about.html"> 
         <span class="auto-style13">ABOUT</span></a> 
        </li> 

        <li> 
         <a href="http://welshmediation.com/helpful.html"> 
         <span class="auto-style13">HELPFUL RESOURCES</span></a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
      </div> 
     </div> 
     <!-- /.container --> 
    </nav> 

    <!-- Page Content --> 
    </div>

出典

2016-04-07 Jeff Bosset

また、そこに2個の開口のタグを持っている必要があります。 –

2番目のボディタグは見つかりませんでしたが、ありがとうございました！ –

' ' –

あなたはjqueryのjsのファイルとあなたが含めると、それを試してみてくださいを受け入れるとして、それが実行されていない理由のブートストラップのjsファイルが含まれていません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

@media screen and (min-width:0) and (max-width:479px){}モバイルでは、このようにCSSを更新する必要があります。私はそれが最初の応答が言うように、あなたが含まれていないjsのを防止することである疑うのにクラス"bs-example-navbar-collapse-1"上記

<div>はstyle="height: 50px; width: 25%;"

.navbar-fixed-top .nav { 
    background: #000 none repeat scroll 0 0; 
    float: left; 
    padding: 15px 0; 
    width: auto; 
} 
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse 
{ 
    float: left; 
    max-height: 340px; 
}

出典

2016-04-07 15:01:21 Rohit

Rohitありがとうございました！私は今モバイルでメニューを見ることができます！しかし、上部のメニューバーではなく、ページコンテンツの上にそのような並べ替え？ –

メニューがモバイル用に機能しない

答えて

関連する問題