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

• • Reply
  comicrage

  Member

  46 Points

  284 Posts

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

  Sep 12, 2018 06:00 PM|comicrage|LINK

  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

  <div> <div> li {display:inline-block}</div> <div>li:before {content:'|'} </div>
  
  <div>.navbar {</div> <div> height: 80px;</div> <div> background-color: grey</div> <div> }</div> <div></div> <div> <div> <div> <div class="navbar row"></div> <div> <nav class="navbar navbar-expand-md bd-primary fixed-top" role="navigation"></div>
  <div> <ul class="navbar-nav ml-auto"></div> <div> <!-- Loads all the RouteInfo items from sidebar.component.ts --> </div> <div> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"></div> <div> <a class="nav-link" [routerLink]="[menuItem.path]"></div> <div> <i class="material-icons">{{menuItem.icon}}</i></div> <div> <p>{{menuItem.title}}</p></div> <div> </a></div> <div> </li></div>
  <div> <a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary navbar-btn ml-0 ml-lg-2">Login </a></div> <div> </ul></div> <div></nav></div> <div></div></div> <div></div> <div></div> <div>I tried add css styling but the navbar background color stays white. </div> <div>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.</div> <div></div> <div>any help is appreciated.</div> <div></div> <div>Thanks</div> <div></div> </div> </div> </div>

• • Reply
  Fei Han - MS...

  All-Star

  40535 Points

  6233 Posts

  Microsoft

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

  Sep 13, 2018 09:00 AM|Fei Han - MSFT|LINK

  Hi comicrage,

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.