Full-Stack Engine

How to make an overlayed navbar using bootstrap 4 and Angular 2/4

In the last months I've been working on a Real State web app using Angular 2 and Bootstrap 4; and one of the first things I wanted to do is personalize the navigation bar, which may look to generic with the basic navbar bootstrap's component.

Untitled2-1

So I decided to create a fancy overlay with a carousel and some other components like inputs and labels, to look like this:

Screenshot-from-2017-10-12-07-22-45

You can find the source code of this project in the GitHub repository pro-vivienda-cr.

The first step is integrating bootstrap 4 client-side behaviors, like the slideshow in the carousel (which are jquery-based in the bootstrap 4 javascript library) with angular 2.

To do this, the fastest approach is using an existing npm package, like ngx-bootstrap or ng-bootstrap. Anyone is a good choice; I'm using ng-bootstrap for this component because it seemed more simple and doc complete at the time I started working on this project than ngx-bootstrap.
So we're going to use only the sass libraries from bootstrap 4 and use ng-bootstrap for the dynamic behaviors.

npm install --save @ng-bootstrap/ng-bootstrap

Once installed, you can add the following import to the main module,

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

You can import NgbModule in other modules you need it.

The next step is to create an transparent navbar,

<div class="transNavbar w-100">
    <div class="dropShadow"></div>
        <div class="navbar-wrapper">
            <nav class="navbar navbar-toggleable-md navbar-inverse py-1" [ngClass]="!isCollapsed?'bg-primary':''">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" (click)="isCollapsed = !isCollapsed" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                    </span>
                </button>
                ...
                ...
            </div>
        </div>
    <home-carousel></home-carousel>
</div>

The class transNavbar works as a placeholder for the next overlaid components, by setting the position to absolute and a z index above the rest.

.navbar {
    background: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: none;
    padding-top: 0;
}
.transNavbar {
    position: absolute;
    z-index: 10;
.dropShadow {
    box-shadow: 0 10px 60px 10px black;
    z-index: 12;
}

On the other hand, the navbar class is overridden to set the background transparent and removing the background image.

As a final touch, the dropShadow class drops a shadow over the navbar items to help to visualize them regardless of the background image set in the carousel

Now, we're going to add a carousel with a set of images.

<ngb-carousel>
    <template ngbSlide>
        <img class="img-fluid" src="assets/images/image6-sm.jpg" >
        <img class="img-fluid" src="assets/images/image6.jpg" >
        <img class="img-fluid" src="assets/images/image6-md.jpg" >
    </template>
    ...
    ...
</ngb-carousel>

Moreover, now you're ready to go with a fancy transparent navbar!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.