Farkangyal Farkangyal - 8 months ago 93
AngularJS Question

Angular2 bootstrap navbar looks awful

I am trying to use bootstrap's navbar in my angular2 app, but the items looks awful:

enter image description here

When I stay on any of the items, they look great(in the picture the mouse is above the About link):
enter image description here

I am using the latest bootstrap and angular..

the code:

<div class="container" *ngIf="checkLocalStorage()">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand">Scrum Dashboard</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/test">About</a></li>
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-lg btn-danger" (click)="logout()">Sign out</button>

Please help!
I will provide if you need further information.


This is just a matter of overriding the bootstrap styles. In your browser, right click the item whose style you want to change and see which class creates the unwanted style. Then in your stylesheet, create the same class, attribute, or other selector and add the desired style. Ensure that your stylesheet loads after the bootstrap stylesheet



.nav navbar-nav > li > a {
    background: white; /* Don't change it here */
    color: grey;

your style sheet

.nav navbar-nav > li > a {
    background: black; /* override it here */
    color: white;

*note: add the :hover state to your selector to change the style on hovering over the element.

.nav navbar-nav > li > a:hover {
    background: blue; /* turns blue when hovering */