Not able to get rid of Navbar item top/bottom margin? - css

Question

I'm new with Bootstrap 4 and SASS. I've been struggling to learn how to make changes but have been able get a couple done. However, one of them I can't seem to figure out is the margin or padding at the top and bottom of the navbar item.
Here is what I've done. On a new MVC project I installed Bootstrap 4 and Bootstrap.sass. I then created a new _custom-variables and copied the _variables content into it so that I can make some changes. I then created a _my-theme.scss file and imported all of them into my site.scss like this.
#import "scss/_custom-variables.scss";
#import "scss/_bootstrap.scss";
#import "scss/_my-theme.scss";
I was finally able to figure out how to change the background color of the navbar by creating a variable for my color and applying it to the _custom-variables and changing the link text to white:
$main-color: #0078D2;
// Navbar links
$navbar-default-link-color: #fff !default;
$navbar-default-link-hover-color: #fff !default;
$navbar-default-link-hover-bg: darken($main-color, 6.5%) !default;
I also had to set the following in the _my-theme.css to actually change the text color to white. I've watched some videos and I know it has to do with specifcicity but I still haven't really got my head wrapped around it. Based on a video I watched, what I did was inspect the link and found the properties that I just copied straight in to the _my-theme.scss.
This is what I had to add to the _my-theme.scss to get the text white.
.navbar-dark
.navbar-nav
.nav-link {
color: #fff;
margin-top: 0px;
margin-bottom: 0px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
color: #fff;
}
However, there is still some padding or margin at the top each link that I would like to get rid of. You can see that I tried setting the margin-top: 0px and margin-bottom: 0px but that didn't work, neither did setting padding to 0px.
I also tried finding the setting in dev tools in Chrome but couldn't find what it is that is setting this.
This is my navbar layout:
<header>
<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top rounded-0">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
How can I remove this spacing and make the dark blue take the whole height of the navbar?

Answer 1

By default the navbar class contains internal padding. If you want to remove the top and bottom padding, just add this CSS:
.navbar {
padding-top: 0;
padding-bottom: 0;
}

Answer 2

The space is padding, and not margins. Use the py-0 utility class to remove the padding from the navbar. And then add padding back to the nav-link to maintain the original height:
https://www.codeply.com/go/roU5MIf724
.navbar-dark
.navbar-nav
.nav-link {
color: #fff;
padding: 10px 0;
}
<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top rounded-0 py-0">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>