Topic: how to change the color of the icons in nav ?
Expected behavior change color of icons in nav to blue
Actual behavior still black no change
Resources (screenshots, code snippets etc.)
my.css
#navbarSupportedContent > ul:nth-child(2) > li > a > i{
color: #007bf;
}
I check the chrome dev shows that the CSS Invalid Property Value of my css file. So how to change the color of the icons in nav
html code :
```
Material Design Bootstrap
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
<div class="container">
<!-- Brand -->
<a class="navbar-brand waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">
<strong class="blue-text">MDB</strong>
</a>
<!-- Collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-effect" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/getting-started/download/"
target="_blank">Free download</a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free
tutorials</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="tencent://message/?uin=513278236&Site=gxlinzi.cn35so.cn&Menu=yes" class="nav-link waves-effect" target="_blank">
<i class="fab fa-qq mr-2"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">
<i class="fab fa-weixin mr-2"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded waves-effect"
target="_blank">
<i class="fab fa-freebsd mr-2"></i>SummerZ
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!--Section: Post-->
<section class="mt-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12 mb-4">
<!--Featured Image-->
<div class="card mb-4 wow fadeIn">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" class="img-fluid" alt="">
</div>
<!--/.Featured Image-->
<!--Card-->
<div class="card mb-4 wow fadeIn">
<!--Card content-->
<div class="card-body text-center">
<p class="h5 my-4">What is MDB?</p>
<p>MDB is world's most popular Material Design framework for building responsive, mobile-first
websites and apps.</p>
<h5 class="my-4">
<strong>MDB - trusted by 400 000 + developers & designers</strong>
</h5>
<hr>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card mb-4 wow fadeIn">
<!--Card content-->
<div class="card-body">
<p class="h5 my-4">That's a very long heading </p>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<p class="h5 my-4">That's a very long heading </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
consequuntur maiores sed eligendi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
consequuntur maiores sed eligendi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
consequuntur maiores sed eligendi.</p>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card mb-4 wow fadeIn">
<div class="card-header font-weight-bold">
<span>About author</span>
<span class="pull-right">
<a href="">
<i class="fab fa-qq mr-2"></i>
</a>
<a href="">
<i class="fab fa-weixin mr-2"></i>
</a>
<a href="">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="">
<i class="fab fa-linkedin-in mr-2"></i>
</a>
</span>
</div>
<!--Card content-->
<div class="card-body">
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto z-depth-1" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg"
alt="Generic placeholder image" style="width: 100px;">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Caroline Horwitz
</h5>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
fuga.
</div>
</div>
</div>
</div>
<!--/.Card-->
<!--Comments-->
<div class="card card-comments mb-3 wow fadeIn">
<div class="card-header font-weight-bold">3 comments</div>
<div class="card-body">
<div class="media d-block d-md-flex mt-4">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Miley Steward
<a href="" class="pull-right">
<i class="fas fa-reply"></i>
</a>
</h5>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Tommy Smith
<a href="" class="pull-right">
<i class="fas fa-reply"></i>
</a>
</h5>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>
</div>
<!-- Quick Reply -->
<div class="form-group mt-4">
<label for="quickReplyFormComment">Your comment</label>
<textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea>
<div class="text-center">
<button class="btn btn-info btn-sm" type="submit">Post</button>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Sylvester the Cat
<a href="" class="pull-right">
<i class="fas fa-reply"></i>
</a>
</h5>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>
</div>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Caroline Horwitz
<a href="" class="pull-right">
<i class="fas fa-reply"></i>
</a>
</h5>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
fuga.
</div>
</div>
</div>
</div>
<!--/.Comments-->
<!--Reply-->
<div class="card mb-3 wow fadeIn">
<div class="card-header font-weight-bold">Leave a reply</div>
<div class="card-body">
<!-- Default form reply -->
<form>
<!-- Comment -->
<div class="form-group">
<label for="replyFormComment">Your comment</label>
<textarea class="form-control" id="replyFormComment" rows="5"></textarea>
</div>
<!-- Name -->
<label for="replyFormName">Your name</label>
<input type="email" id="replyFormName" class="form-control">
<br>
<!-- Email -->
<label for="replyFormEmail">Your e-mail</label>
<input type="email" id="replyFormEmail" class="form-control">
<div class="text-center mt-4">
<button class="btn btn-info btn-md" type="submit">Post</button>
</div>
</form>
<!-- Default form reply -->
</div>
</div>
<!--/.Reply-->
</div>
</div>
<!--Grid row-->
</section>
<!--Section: Post-->
</div>
<!--Call to action-->
<div class="pt-4">
<a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank"
role="button">Download MDB
<i class="fas fa-download ml-2"></i>
</a>
<a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start
free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!--/.Call to action-->
<hr class="my-4">
<!-- Social icons -->
<div class="pb-4">
<a href="https://www.facebook.com/mdbootstrap" target="_blank">
<i class="fab fa-facebook-f mr-3"></i>
</a>
<a href="https://twitter.com/MDBootstrap" target="_blank">
<i class="fab fa-twitter mr-3"></i>
</a>
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
<i class="fab fa-youtube mr-3"></i>
</a>
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
<i class="fab fa-google-plus-g mr-3"></i>
</a>
<a href="https://dribbble.com/mdbootstrap" target="_blank">
<i class="fab fa-dribbble mr-3"></i>
</a>
<a href="https://pinterest.com/mdbootstrap" target="_blank">
<i class="fab fa-pinterest mr-3"></i>
</a>
<a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">
<i class="fab fa-github mr-3"></i>
</a>
<a href="http://codepen.io/mdbootstrap/" target="_blank">
<i class="fab fa-codepen mr-3"></i>
</a>
</div>
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-3">
© 2019 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->
// Animations initialization new WOW().init();
```
Add comment
Hi,
would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? I'll try to help you.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: PC
- Browser: chrome
- OS: win7
- Provided sample code: No
- Provided link: No