Q&A
まずはどうためしたのかを提示しましょう。
Bootstrap4を使用し、ハンバーガーメニューの三本線の色を白→黒に変更したいのですが色々試しても反映されません。
一番簡単な方法を教えていただけないでしょうか。
よろしくお願いいたします。
コードを提示しろ
今のコードと、具体的に試したことを記載してください。
この質問文だけでは答えようがありません。
回答2件
0
ベストアンサー
再度いただいたソースでは何も表示されなく
なにがしたいのかもわかりませんでした。
再度動作するHTMLを記載しておきますので
あとは質問者様でお直しください。
CSS
1/* 色指定一覧 2 --blue: #007bff; 3 --indigo: #6610f2; 4 --purple: #6f42c1; 5 --pink: #e83e8c; 6 --red: #dc3545; 7 --orange: #fd7e14; 8 --yellow: #ffc107; 9 --green: #28a745; 10 --teal: #20c997; 11 --cyan: #17a2b8; 12 --white: #fff; 13 --gray: #6c757d; 14 --gray-dark: #343a40; 15 --primary: #007bff; 16 --secondary: #6c757d; 17 --success: #28a745; 18 --info: #17a2b8; 19 --warning: #ffc107; 20 --danger: #dc3545; 21 --light: #f8f9fa; 22 --dark: #343a40; 23*/- リスト 24/* 3本線の色指定 */ 25.navbar-light .navbar-toggler-icon { 26 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 27} 28/* メニューを上ぴったしに合わせる */ 29.mt-3, .my-3 { 30 margin-top: 0rem !important; 31}
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 11 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 12 <script src="/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 13 <script src="/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 14 <script src="/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 15 16<title>test</title> 17</script> 18</head> 19<body> 20 21 <!-- 上面メニュー 色はlightで指定 --> 22 <nav class="navbar navbar-expand-xl navbar-light bg-light mt-3 mb-3" > 23 <!-- 左端リンク --> 24 <a class="navbar-brand" href="#">Navbar</a> 25 <!-- 右端三本線ボタン --> 26 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation"> 27 <span class="navbar-toggler-icon"></span> 28 </button> 29 <!-- メニュー一覧 --> 30 <div class="collapse navbar-collapse" id="navbarNav3"> 31 <ul class="navbar-nav"> 32 <li class="nav-item active"> 33 <!-- メニュー1 --> 34 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 35 </li> 36 <li class="nav-item"> 37 <!-- メニュー2 --> 38 <a class="nav-link" href="#">Features</a> 39 </li> 40 <li class="nav-item"> 41 <!-- メニュー3 --> 42 <a class="nav-link" href="#">Pricing</a> 43 </li> 44 <li class="nav-item"> 45 <!-- メニュー4 --> 46 <a class="nav-link disabled" href="#">Disabled</a> 47 </li> 48 </ul> 49 </div> 50 </nav> 51</body> 52</html>
投稿2020/09/22 12:41
編集2020/09/25 00:06
総合スコア2506
0
バーガーメニューアイコンを変更・調整する方法:Bootstrap 4
に書かれている
ハンバーガーメニューを調整の様に
stroke='rgba(0, 0, 0, 1)'に書き換えてください
css
1 .navbar-light .navbar-toggler-icon { 2 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' 3 xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' 4 stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 5 }
投稿2020/09/20 16:05
総合スコア2506
お返事を本当にありがとうございます。
【bootstrap.min.css】の透過の箇所もいじってみたのですが、黒にはならず...背景色を白以外にしないと表示しません。
どのようにコードを書いたらいいのか、三本線に関しては、こちらだけです。
【ＨＴＭＬ】
<div class="site-mobile-menu">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
【ＣＳＳ】
.site-mobile-menu {
width: 300px;
position: fixed;
right: 0;
z-index: 2000;
padding-top: 20px;
background: #fff;
height: calc(100vh);
-webkit-transform: translateX(110%);
-ms-transform: translateX(110%);
transform: translateX(110%);
-webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;
transition: .3s all ease-in-out; }
.offcanvas-menu .site-mobile-menu {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%); }
.site-mobile-menu .site-mobile-menu-header {
width: 100%;
float: left;
padding-left: 20px;
padding-right: 20px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
float: right;
margin-top: 8px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
font-size: 30px;
display: inline-block;
padding-left: 10px;
padding-right: 0px;
line-height: 1;
cursor: pointer;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
color: #25262a; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
float: left;
margin-top: 10px;
margin-left: 0px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
display: inline-block;
text-transform: uppercase; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
max-width: 70px; }
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
text-decoration: none; }
.site-mobile-menu .site-mobile-menu-body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
padding: 20px;
height: calc(100vh - 52px);
padding-bottom: 150px; }
.site-mobile-menu .site-nav-wrap {
padding: 0;
margin: 0;
list-style: none;
position: relative; }
.site-mobile-menu .site-nav-wrap a {
padding: 10px 20px;
display: block;
position: relative;
color: #212529; }
.site-mobile-menu .site-nav-wrap a:hover {
color: #c7b299; }
.site-mobile-menu .site-nav-wrap li {
position: relative;
display: block; }
.site-mobile-menu .site-nav-wrap li.active > a {
color: #c7b299; }
.site-mobile-menu .site-nav-wrap .arrow-collapse {
position: absolute;
right: 0px;
top: 10px;
z-index: 20;
width: 36px;
height: 36px;
text-align: center;
cursor: pointer;
border-radius: 50%; }
.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
background: #f8f9fa; }
.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
font-size: 12px;
z-index: 20;
font-family: "icomoon";
content: "\f078";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-180deg);
-ms-transform: translate(-50%, -50%) rotate(-180deg);
transform: translate(-50%, -50%) rotate(-180deg);
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
-webkit-transform: translate(-100%, -100%);
-ms-transform: translate(-100%, -100%);
transform: translate(-100%, -100%); }
.site-mobile-menu .site-nav-wrap > li {
display: block;
position: relative;
float: left;
width: 100%; }
.site-mobile-menu .site-nav-wrap > li > a {
padding-left: 20px;
font-size: 20px; }
.site-mobile-menu .site-nav-wrap > li > ul {
padding: 0;
margin: 0;
list-style: none; }
.site-mobile-menu .site-nav-wrap > li > ul > li {
display: block; }
.site-mobile-menu .site-nav-wrap > li > ul > li > a {
padding-left: 40px;
font-size: 16px; }
.site-mobile-menu .site-nav-wrap > li > ul > li > ul {
padding: 0;
margin: 0; }
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li {
display: block; }
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a {
font-size: 16px;
padding-left: 60px; }
あなたの回答
tips
プレビュー
