#実現したいこと
ナビゲーションバーにて、トグルダウンメニューに必要な、「三」のようなアイコンを表示したいです。
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
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/12 10:28