2 navbar without space

Question

I want to make something like this

When I made 2 navbar, there is a white gap separating them, how to remove this gap?

I've read somewhere that if I change the size of the navbar's elements will automatically increase its height , but it didn't work out.

If I need to make a custom class for a navbar, what properties should I change?

edit :

<nav class ="navbar topNavbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span class="glyphicon glyphicon-log-in"></span> Login </a></li>
<li><a href="signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up </a></li>
</ul>
</div>
</nav>

<nav class="navbar botNavbar">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Website name</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="">Home</a></li>
        <li><a href="collections.php">Collections</a></li>
        <li><a href="">About Us</a></li>
      </ul>
      </div>
  </div>
</nav>

<style>
.topNavbar {
 background-color: #F60;
}

.botNavbar {
 background-color : #F90;
}
</style>

Answer 1

Bootstraps .navbar has a 20px bottom margin by default.

So you could do:

.topNavbar {
    background-color: #F60;
    margin-bottom: 0;
}

Bootply