Animated navbar example not working

Ryannnnn pro premium priority commented 2 years ago

Hi Arkadiusz,

That code fix doesn't work. The hamburger icon isn't clickable, and it's not expanding.

This is the home.component.ts file

import { Component, HostListener, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

    navbarScrolled = false;

    ngOnInit(): void {
        fromEvent(window, 'scroll').subscribe(() => {
            if (window.scrollY > 0) {
                this.navbarScrolled = true;
            } else {
                this.navbarScrolled = false;
            }
        });
    }
}

This is the home.component.scss file:

/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler .fa-bars {
    color: #fff;
}

/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler .fa-bars {
    color: #4f4f4f;
}

/* Color of the navbar AFTER scroll */
.navbar-scrolled {
    background-color: #fff;
}

/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
}

And this is the home.component.html file:

<!--Main Navigation-->
<header>
    <!-- Animated navbar-->
    <nav class="navbar navbar-expand-lg fixed-top navbar-scroll" [class.navbar-scrolled]="navbarScrolled">
        <div class="container-fluid">
            <button class="navbar-toggler ps-0" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01" aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="d-flex justify-content-start align-items-center">
                    <i class="fas fa-bars"></i>
                </span>
            </button>
            <div class="collapse navbar-collapse" id="navbarExample01">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#intro">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">Learn Bootstrap 5</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>
                    </li>
                </ul>

                <ul class="navbar-nav flex-row">
                    <!-- Icons -->
                    <li class="nav-item">
                        <a class="nav-link pe-2" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-2" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-2" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ps-2" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">
                            <i class="fab fa-github"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Animated navbar -->

    <!-- Background image -->
    <div id="intro" class="bg-image" style="
                background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.jpg);
                height: 100vh;
                ">
        <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8)">
            <div class="container d-flex align-items-center text-center h-100">
                <div>
                    <h1 class="mb-5">This is title</h1>
                    <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae
                        laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis,
                        sit non accusamus maxime, magni nulla quasi iste ipsa architecto? Autem!
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Background image -->
</header>
<!--Main Navigation-->

<div class="container my-5">
    <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam minima perspiciatis eos tenetur. Praesentium dolores at quos aperiam sed, sint provident consectetur incidunt, nostrum porro earum commodi, ex architecto.</p>

</div>

Could you please let me know what needs to be done to get it to work like the example?

https://mdbootstrap.com/snippets/standard/mdbootstrap/2946064#html-tab-view

Thank you, Ryan

Arkadiusz Idzikowski staff commented 2 years ago

We updated the code in the MDB Angular documentation, it should work correctly now. Please try to copy all the code from the HTML, Typescript and SCSS tabs and let me know if you encounter any further problems: https://mdbootstrap.com/docs/angular/navigation/headers/#section-animated-navbar

Ryannnnn pro premium priority commented 2 years ago

looks great, thank you :)