CODEWITHSUNDEEP
angularjsangulartwitter-bootstrap-3
Colosh
Colosh

Reputation: 145

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>
            </button>
            <a class="navbar-brand">Scrum Dashboard</a>
        </div>
        <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>
            </ul>
            <form class="navbar-form navbar-right">
                <button type="submit" class="btn btn-lg btn-danger" (click)="logout()">Sign out</button>
            </form>
        </div>
    </div>
</nav>

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

Upvotes: 0

Views: 994

Answers (1)

Nate May
Nate May

Reputation: 4062

This is just a matter of overriding the bootstrap styles. In your browser, right click => and "Inspect" 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

Example

bootstrap.css

.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 */
}

Upvotes: 1

Related Questions