BootstrapNavbarの文字色変更

css
1<div class="container">
2    <nav class="navbar navbar-expand-lg navbar-light bg-light">
3        <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
4        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
5            <span class="navbar-toggler-icon"></span>
6        </button>
7            
8        <div class="collapse navbar-collapse" id="navbarSupportedContent">
9            <ul class="navbar-nav ml-auto mt-3">
10                <li class="nav-item">
11                    <a class="nav-link" href="#">ネストクリニックについて</a>
12                </li>
13                <li class="nav-item">
14                    <a class="nav-link" href="#">担当医の紹介</a>
15                </li>
16                <li class="nav-item">
17                    <a class="nav-link" href="#">医院内の紹介</a>
18                </li>
19                <li class="nav-item">
20                    <a class="nav-link" href="#">アクセス</a>
21                </li>
22            </ul>
23        </div>
24    </nav>
25</div>

ナビバーの中の文字色を変えたいのですがうまくいきません。
navタグのnavbar-lightを消してCSSで色を変更すると文字色は変わりますが、ハンバーガーボタンが消えてしまいます。またnavbar-ligjtをそのままにしてそこにCSSをかけても色は変更されません。どうしたら文字色が変更できるでしょうか。

kei344

2019/03/16 05:45

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2019/03/16 06:15

試したCSSも提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザの開発ツールで確認すればお分かりになると思いますが、Bootstrapのnavbarの文字色は.navbar-lightの場合は以下のように指定されています。

css
1.navbar-light .navbar-nav .nav-link {
2    color: rgba(0,0,0,.5);
3}
4.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
5    color: rgba(0,0,0,.7);
6}