CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3navbar
sigillum_conf
sigillum_conf

Reputation: 433

Simple Margin Collapse issue

Ok, my background is mostly on back end development, and this is because I really and greatly suck at styling stuff. I leave that to other people in my team. But right now I am having a small margin collapse issue that I do not seem to understand. Being that the issue is easy to replicate, the code will be added in here with a link to the site that will act as our fiddle.

But the issue is the next: I have a bootstrap navigation bar in which I am trying to change one of the items's background to yellow. Simple as that. The issue is that when I do I get a small black line in between(greatly noticeable), also, there is a huge white space right below it as well. The code is the following:

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

I have tried setting the margins in different combinations, but I can't seem to figure out how to stop the margin from collapsing in these parts:

enter image description here

The jsbin is:

https://jsbin.com/mibeyozexo/edit?html,output

Any input would be awesome. Cheers.

Upvotes: 1

Views: 51

Answers (2)

R&#239;sh&#239;K&#234;sh K&#252;mar
R&#239;sh&#239;K&#234;sh K&#252;mar

Reputation: 5092

You Can Unset or Remove the Border of Bootstrap Nav Bar Like This:

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}


*{
margin:0px;
padding:0px;

}

.navbar {
  border-color: transparent;
  border: 0px;
  background-color: #99ccff; 
}

.navbar.navbar-default {
    background-color: #99ccff;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}




#yellow {
    	background-color: #ffc424;
        margin-bottom: 0px;
    }
    
    #redBar {
    	background-color: red;
        margin-top: 0;
        height:200px;
    }
    nav {
    	margin-bottom: 0;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse" style="border-color: thistle;">
  <div class="container-fluid">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

Upvotes: 2

kyun
kyun

Reputation: 10264

#yellow {
  background-color: #ffc424;
  margin-bottom: 0;
}

#redBar {
  background-color: red;
  margin-top: 0;
  height: 200px;
}

nav {
  margin-bottom: 0;
  margin: 0;
  border: none;
}

nav.navbar {
  border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid" style="">
    <div id="yellow" class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div id="redBar">
</div>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

Upvotes: 2

Related Questions