Bootstrap: nav bar wont color

This question already has an answer here:

Change navbar color in Twitter Bootstrap 13 answers

---

In head tag

<link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/style.css">

Just before the closing of Body Tag

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Just check if you have added this correctly (or all the files).

---

You might need to check whether you are trying to change a css of already having !important

And already you are using the class bg-light which color your nav too. Remove it.

<nav class="navbar navbar-expand-md fixed-top sticky-navigation " style="background: green !important;">
        <button class="navbar-toggler navbar-toggler-right" type="button" style="background: green !important;" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="ion-grid icon-sm"></span>
        </button>
        <a class="navbar-brand hero-heading" href="#">Jeroen Hooge</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#main">Product <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#features">Werk</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#pricing">Prijs</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#team">Team</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#blog">Blog</a>
                </li>
                <li class="nav-item mr-3">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

链接地址: http://www.djcxy.com/p/89436.html

上一篇: 改变引导类给出的样式

下一篇: Bootstrap：导航栏不会着色