Having trouble center-aligning your Bootstrap 4 navbar in your Angular code base? You're not alone. I too wanted to reduce the gaps between menu items when transitioning from one to another.
Below you'll find snippets of my HTML, TS, and CSS:
My HTML:
<nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
<ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
<div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
<a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
</div>
</li>
</ul>
</nav>My TS:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-top-menu',
templateUrl: './top-menu.component.html',
styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {
menus : any = [
{
heading: "MENU1",
options:
[
{name: "GOOGLE",link: "https://google.com/", order: 1},
{name: "GitHub",link: "https://github.com", order: 2},
]
}
];
isDropdownOpen: boolean = false;
constructor() { }
ngOnInit(): void {
}
}
My CSS:
.navbar{
padding:0px;
}
.nav-border {
border-bottom:1px solid #ccc;
}
li { cursor: pointer; }
li:hover{
background-color: black;
}
a {
color: black;
}
.navbar-nav {
padding: .9rem 0 0;
}
.nav-link:hover {color:white;}
.widthd{
width: 100%;
}
My screen:
https://i.sstatic.net/pV1kJ.png
Want to see what my menu looks like on screen? As you can see, the items are currently too far apart and not centralized. Let's fix that.