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

  • Question

  • User956626884 posted


    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>

    <a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary navbar-btn ml-0 ml-lg-2">Login </a>
    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.

    Wednesday, September 12, 2018 6:00 PM

All replies

  • 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>
                <ul class="nav navbar-nav">
                    <li ng-repeat="menuItem in MenuItems">
                        <a href="#">{{menuItem.title}}</a>

    CSS style:

        li {
            display: inline-block
        li > a:before {
            content: '|'
        .navbar {
            /*height: 80px;*/
            background-color: grey !important

    JavaScript code:

        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" }

    With Regards, 

    Fei Han

    Thursday, September 13, 2018 9:00 AM