###前提・実現したいこと
ここに質問したいことを詳細に書いてください
携帯とタブレット画面に対応するためにハンバーガーボタンをつけてますが、うまくいきません。
###発生している問題・エラーメッセージ
ハンバーガーボタンを押しても正しく閉じることができないのと、レイアウトがしたにずれないのです。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BootstrapのCSS読み込み --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery読み込み --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#site-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="logo"><%= link_to "relief goods", root_path %></h1> </div> <div class="collapse navbar-collapse" id="site-menu"> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "ガイドライン", guidelines_news_path %></li> <li><%= link_to "支援物資配信情報", supply_infos_info_path %></li> <% unless logged_in? %> <li><%= link_to "新規登録", signup_path %></li> <li><%= link_to "ログイン", login_path %></li> <% else %> <li> <%= link_to new_item_path do %> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 物資ネット検索 <% end %> </li> <li><%= link_to "物情配信登録", supply_infos_path %></li> <li><%= link_to "物資在庫登録", reliefs_index_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="gravatar"> <%= gravatar_for current_user , size: 20 %> </span> <%= current_user.name %> <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><%= link_to "アカウント" , current_user %></li> <li><%= link_to "プロフ設定", edit_user_path(current_user) %></li> <li><%= link_to "お届け先設定", deliveries_path %></li> <li role="separator" class="divider"></li> <li> <%= link_to "ログアウト", logout_path, method: "delete" %> </li> </ul> </li> </ul> <% end %> </div> </div> </nav> </header> header { padding:10px; font-family: 'Vidaloka', serif; text-align:center; font-weight:normal; color:#fff; height: 60px; .navbar { width: 100%; margin: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); &.navbar-default { background-color: #fff !important; } .container-fluid { margin: 0 !important; padding: 0 !important; } .navbar-inner { max-width: 1200px; margin: 0 auto; .navbar-header { h1 { color:white; margin-light:400px; padding: 10px 0 0 0 !important; a { width: 200px; height: 40px !important; margin: 0; background-size: contain; display: block; white-space: nowrap; } } } .maintitle{ display:block; font-size:72px; line-height:72px; letter-spacing:-4px; text-shadow:1px 1px 3px #ccc, 1px -1px 3px #ccc, -1px 1px 3px #ccc, -1px -1px 3px #ccc; } .description{ display:block; font-size:24px; line-height:10px; letter-spacing:1px; text-shadow:1px 1px 3px #ccc, 1px -1px 3px #ccc, -1px 1px 3px #ccc, -1px -1px 3px #ccc; } .navbar-nav { li { a { padding: 10px; .gravatar { margin-right: 2px; img { border-radius: 100%; } } } } .dropdown-menu { li { &.divider { margin: 0; } a { padding: 10px 15px; } } } } } } } .logo{ background-color:#adff2f } @media (max-width: 768px) { body { font-size: 12px; } h1 { font-size: 30px; } h2 { font-size: 24px; } .panel-title { font-size: 14px; } }
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
Ruby,Ruby on Rails
あなたの回答
tips
プレビュー