質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

423閲覧

navbarのトグルダウンメニューにありがちな「三」のようなアイコンを表示したい

yamayama-ya-ma

総合スコア14

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/12 08:55

#実現したいこと
ナビゲーションバーにて、トグルダウンメニューに必要な、「三」のようなアイコンを表示したいです。
https://stackoverflow.com/questions/24019235/howto-create-a-bootstrap-3-navbar-whose-entire-navbar-header-is-clickable-on-io
このURL中の画像で言う、右側のやつです。1日1回見るレベルのアレです。

#現状
表示されません!がナビゲーションバーです。

Bootstrap 3.3.7
を用いています。
画像の通り、アイコンは表示されていませんが、トグルダウンメニューそのものは機能しています。
そもそも最初のURLのような、よくあるタイプのアイコンが表示されていない理由がよくわかりません。
アイコンを表示するには、どのようにしたらよいんでしょうか…

#コード

<header> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <button type="button" class="navbar-toggle collapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">表示されてません!</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% if logged_in? %> <li><%= link_to 'マイページ', user_path(current_user) %></li> <li><%= link_to "お題一覧", topics_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="gravatar"> <img src="<%= gravatar_url(current_user, size: 20) %>" alt="" class="img-circle"> </span> <%= current_user.name %> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><%= link_to 'マイページ', user_path(current_user) %></li> <li><%= link_to 'ランキング', rankings_fav_path %></li> <li role="separator" class="divider"></li> <li><%= link_to 'ログアウト', logout_path, method: :delete %></li> </ul> </li> <% else %> <li><%= link_to '登録する', signup_path %></li> <li><%= link_to "お題を見る", topics_path %></li> <li><%= link_to 'ログイン', login_path %></li> <% end %> </ul> </div> </nav> </header>
/* navbar */ .navbar { color: black; background-color: white; opacity: 0.8; } .navbar-header img { margin-top: 5px; height: 30px; } .navbar-brand { color: #000; } .nav li { color: #000; }

Bootstrap読み込み部分

<!-- Bootstrap CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Bootstrap JavaScript--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>

#環境
Cloud9
Rails 5.2.0
Bootstrap 3.3.7

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  • nav要素navbar-defaultクラスを追記。
  • div.containerの閉じタグがないため、閉じタグを追記。

以上の2つを行うことで、ウィンドウ横幅が768pxより小さくなったときに、ハンバーガーメニューが表示されるようになります。

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <title>タイトル</title> 7</head> 8<body> 9<header> 10 <nav class="navbar navbar-default navbar-fixed-top"> 11 <div class="container"> 12 <div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 13 aria-expanded="false"> 14 <button type="button" class="navbar-toggle collapsed"> 15 <span class="sr-only">Toggle navigation</span> 16 <span class="icon-bar">&nbsp;</span> 17 <span class="icon-bar">&nbsp;</span> 18 <span class="icon-bar">&nbsp;</span> 19 </button> 20 <a class="navbar-brand" href="/">表示されてません!</a> 21 </div> 22 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 23 <ul class="nav navbar-nav navbar-right"> 24 <li><a href="#">登録する</a></li> 25 <li><a href="#">お題を見る</a></li> 26 <li><a href="#">ログイン</a></li> 27 </ul> 28 </div> 29 </div> 30 </nav> 31</header> 32<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 33<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 34</body> 35</html>

投稿2018/08/12 10:01

編集2018/08/12 10:03
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamayama-ya-ma

2018/08/12 10:28

無事解決できました!どうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問