CODEWITHSUNDEEP
cssangularnavigation
user11819426
user11819426

Reputation:

angular navigation bar issue

I work on a project in angular and I have a problem with the navigation bar.

I am posting two screenshots, the first shows the status before login while the second shows the status when Login The administrator. In the 1st I would like the format of "Sign Up", "Login" to be like the letters on the left and to be in the same row.

In the 2nd I would like the "Admin Panel" to go in the same rowas above.

1

2 enter image description here

Here is the code:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Auction App</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a routerLink='/home'>Home</a></li>
      
      <li ><a routerLink='/myAuctions'>MyAuctions</a></li>
      <li><a href="#">MyOffers</a></li>
      <li><a href="#">Messages</a></li>
      <div *ngIf="checkIfAdminisLoggedIn() === true;">
        <li><a routerLink='/board-admin'><span class="glyphicon glyphicon-user"></span> Admin Panel</a></li>
      </div>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <div *ngIf="isLoggedIn === false; else elseBlock">
        <li><a routerLink='/register' href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a routerLink='/login'> <span class="glyphicon glyphicon-log-in"></span>Login</a></li>
      </div>
      <ng-template #elseBlock>
        <li><a (click)="onLogout()"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
      </ng-template>
    </ul>
  </div>
</nav>

CSS

.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

Upvotes: 2

Views: 191

Answers (1)

AhmedSHA256
AhmedSHA256

Reputation: 663

You have your Admin panel thing inside your left side in your navbar. You have to put it on your right, like this, and it should work.

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Auction App</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a routerLink='/home'>Home</a></li>
          
          <li ><a routerLink='/myAuctions'>MyAuctions</a></li>
          <li><a href="#">MyOffers</a></li>
          <li><a href="#">Messages</a></li>
          
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <div *ngIf="isLoggedIn === false; else elseBlock">
            <li><a routerLink='/register' href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a routerLink='/login'> <span class="glyphicon glyphicon-log-in"></span>Login</a></li>
          </div>
<div *ngIf="checkIfAdminisLoggedIn() === true;">
            <li><a routerLink='/board-admin'><span class="glyphicon glyphicon-user"></span> Admin Panel</a></li>
          </div>
          <ng-template #elseBlock>
            <li><a (click)="onLogout()"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
          </ng-template>
        </ul>
      </div>
    </nav>

In order to remove the blue color (and purple when visited) you have to do this:

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

Adapt that CSS to anything that best fits to you.

Upvotes: 1

Related Questions