Bootstrap navbar won't collapse

Question

I'm currently jesting a little with Bootstrap and I came across a problem with one of my websites for which I can't seem to find a solution.

I am currently writing two websites, and for those two websites I am using the same modified bootstrap navbar. There are NO fundamental differences in the navbar HTML and CSS code (the only differences are the colors and the Brand/Section names), however, the button that appears so the navbar can collapse is not working in one of these sites, and working perfectly in the other. Since I see no difference, I don't understand why one would work and not the other...

Here's the first website navbar HTML (the one that works):

<nav class="navbar navbar-new" role="navigation">
    <div class="container-fluid">
        <!-- logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="main.html"> Artist Name </a>
        </div>
        <!-- menu -->
        <div class="collapse navbar-collapse navbar-right" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="main.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Here's the second website navbar HTML :

<nav class="navbar navbar-new" role="navigation">
<div class="container-fluid">
    <!-- logo -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">TNDC Inc.</a>
    </div>
    <!-- menu -->
    <div class="collapse navbar-collapse navbar-right" id="navbar1">
        <ul class="nav navbar-nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li class = "active"><a href="expertise.html">Expertise</a></li>
            <li><a href="competencies.html">Competencies</a></li>
        </ul>
    </div>
</div>

The problem might be with the CSS I included in the second website so that a jumbotron I put under the navbar wasn't separated. However, I put a similar CSS line in the first website so that a carousel I included wasn't separated as well.

Here's the first website's CSS line :

.navbar { margin-bottom:0px; }
.carousel-caption { margin-top:0px; }

Here's the second website's CSS line :

.navbar {
margin-bottom:0;}

.jumbotron {
  margin-bottom:0;}

Here's also CSS I included in both websites to modify the navbar's appearance in case the problem resided here (there are no differences in this CSS between both websites, only the colors are different) :

/*start navbar*/
.navbar {
border-radius: 0;
}

.navbar-new {
background-color: #007008;
border-color: #004005;
}

.navbar-new .navbar-brand,
.navbar-new .navbar-brand:hover,
.navbar-new .navbar-brand:focus {
color: #FFF;
}

.navbar-new .navbar-nav > li > a {
color: #FFF;
}

.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: #004005;
}

.navbar-new .navbar-nav > .active > a,
.navbar-new .navbar-nav > .active > a:hover,
.navbar-new .navbar-nav > .active > a:focus {
color: #FFF;
background-color: #004005;
}

.navbar-new .navbar-text {
color: #FFF;
}

.navbar-new .navbar-toggle {
border-color: #004005;
}

.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #004005;
}

.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}
/*end navbar*/

Sorry for the very long post and for the eventual English errors, I'm not a native speaker. I hope someone will be able to help me out, although I have a complete trust in this community :D.

Answer 1

I think there is something else going on here. I took your two code blocks and cut and pasted them separately into one of my Bootstrap sites and both worked correctly. I don't think the navbar or jumbotron margins would have any affect. I also cut and paste your css into my page and still both versions worked correctly.

My guess is there is some trivial thing somewhere else in your html or css that is messing this up.