Having just embarked on my journey with Bootstrap 4 and SASS, I've encountered challenges while trying to customize various elements. Despite managing to implement a few changes successfully, one aspect that continues to elude me is adjusting the margin or padding around the navbar items.
My approach so far has been to set up a new MVC project, install Bootstrap 4 along with Bootstrap.sass, create a _custom-variables file, duplicate the _variables content into it for customization purposes, and then create a _my-theme.scss file to import all these components into my site.scss as shown below.
@import "scss/_custom-variables.scss";
@import "scss/_bootstrap.scss";
@import "scss/_my-theme.scss";
One success story was changing the navbar's background color by defining a custom variable for my desired color. Additionally, I adjusted link text to white using the following settings:
$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;
To ensure the text color change took effect, the following CSS rules had to be added to the _my-theme.css file based on guidance from a video tutorial:
.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;
}
Despite setting margins to zero, some residual spacing remains around each link which I haven't been able to eliminate. The ideal solution still evades me, even after trying debugging tools in Chrome.
The included code snippet showcases my current 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>
https://i.sstatic.net/27bjf.png
Would appreciate guidance on eliminating this unwanted spacing and ensuring the dark blue color fills the entire height of the navbar.