Home Angular 8 How to make navbar sticky in Angular 9?

How to make navbar sticky in Angular 9?

by therichpost
0 comments
How to make business template with Bootstrap 4 and Angular 9?

Hello to all, welcome on therichpost.com. In this post, I will tell you, How to make navbar sticky in Angular 9?

Post Working:

I am using Bootstrap 4 into my angular 9 application and just added one class, bootstrap 4 navbar changes to sticky.

Here is the working code and please use carefully:

1. Here is the class that I have added to my Bootstrap 4 navbar into my Angular 9 application(app.component.html file):

<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" routerLink="/users">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      
      <li class="nav-item">
        <a class="nav-link" routerLink="/adduser">Add User</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/users">Users</a>
      </li>
    </ul>
  </div>  
</nav>

 

Here is the class name : sticky-top that we need to add into navbar.

If you have any kind of query then please do comment below.

Jassa

Thak you

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.