angular boostrap changing navbar background color and adding pipe '|' between menu item

Question

User956626884 posted

Hi,

I have a bug in my code where I am trying to change the background color of my angular navbar

here is my .css

li {display:inline-block}

li:before {content:'|'}

.navbar {

height: 80px;

background-color: grey

}

<div class="navbar row">

<nav class="navbar navbar-expand-md bd-primary fixed-top" role="navigation">

<ul class="navbar-nav ml-auto">

<!-- Loads all the RouteInfo items from sidebar.component.ts -->

<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">

<a class="nav-link" [routerLink]="[menuItem.path]">

<i class="material-icons">{{menuItem.icon}}</i>

<p>{{menuItem.title}}</p>

</a>

</li>

<a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary navbar-btn ml-0 ml-lg-2">Login </a>

</ul>

</nav>

</div>

I tried add css styling but the navbar background color stays white. 

Also I need to add '|' between the navbar menuitem but when I apply the css styling, the pipes are at the top of the navbar and the menu item are about two rows below the pipes.

any help is appreciated.

Thanks

Answer 1

User61956409 posted

Hi comicrage,

I tried add css styling but the navbar background color stays white. 

You can try to use !important declaration, like below:

.navbar {
    height: 80px;
    background-color: grey !important
}

And if you'd like to dynamically bind menu items, you can try to refer to the following code snippet.

<div ng-app="MyApp" class="container" ng-controller="MyCtrl">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li ng-repeat="menuItem in MenuItems">
                    <a href="#">{{menuItem.title}}</a>
                </li>
            </ul>
        </div>
    </nav>
</div>  

CSS style:

<style>
    li {
        display: inline-block
    }

    li > a:before {
        content: '|'
    }

    .navbar {
        /*height: 80px;*/
        background-color: grey !important
    }
</style>

JavaScript code:

<script>
    var app = angular.module('MyApp', []);

    app.controller("MyCtrl", function ($scope, $http) {
        $scope.MenuItems = [
            { "icon": "xxxxx", "title": "Home" },
            { "icon": "xxxxx", "title": "Page 1" },
            { "icon": "xxxxx", "title": "Page 2" },
            { "icon": "xxxxx", "title": "Page 3" }
        ];


    })
</script>

With Regards, 

Fei Han