Bootstrap: nav bar wont color

Question

I got a problem with my bootstrap nav bar. It wont color the way I want it too and I tried adding code even with the !import but I can't get it to work

<nav class="navbar navbar-expand-md navbar-ligt 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>

This is what my code looks like but it won't color the background green only for the first milisecond or something.

If I inspect the website you can see on the left that it somehow makes it a different color and I don't know why There is nothing in the css making it that color. If I am on the top of the website it makes it transparent and if I scrol this color

May be other css is conflicting here,recheck all css by inspecting. — Khushbu Vaghela, Mar 21 '18 at 09:53
@KhushbuVaghela it all links to the same css and there is nothing that makes it that color, not even in the css that are not even in use — tomdebom, Mar 21 '18 at 09:56

score 0 · Answer 1 · answered Mar 21 '18 at 10:58

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).

score 0 · Answer 2 · answered Mar 21 '18 at 11:21

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>

Bootstrap: nav bar wont color

2 Answers2