Topic: Animated navbar example not working

Ryannnnn priority asked 1 year ago


Expected behavior

This example looks fantastic:

https://mdbootstrap.com/docs/angular/navigation/headers/#section-animated-navbar

The full-screen demo is here:

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

And in the demo, when you make the browser skinny, the navbar links disappear, and the hamburger icon shows up. When you click the hamburger icon, the navbar expands to show the hidden links.

Actual behavior

When copying and pasting the code into my MDB5-Angular (4.1.0) app...

  • the hamburger icon shows
  • but it's not clickable, so the navbar doesn't expand to show the hidden links

Please note that in the example, I'm copying the following

HTML --> app.compnent.html

CSS --> app.component.scss

I also tried copying the CSS into the Angular styles.scss file, but that didn't work either.

Resources (screenshots, code snippets etc.)



It seems that the snippet in the documentation is missing the typescript code responsible for adding and removing the navbar-scrolled class. I added that to our to do list and we will update the example in the documentation. For now please add this code to your component ts file:

  navbarScrolled = false;

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

and update the nav element HTML code to:

  <nav
    class="navbar navbar-expand-lg fixed-top navbar-scroll"
    [class.navbar-scrolled]="navbarScrolled"
  >

Ryannnnn priority commented 1 year 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 1 year 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 priority commented 1 year ago

looks great, thank you :)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.1.0
  • Device: Mac
  • Browser: Chrome
  • OS: 13.3.1
  • Provided sample code: Yes
  • Provided link: Yes