Animated navbar example not working

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.)

Add comment

Arkadiusz Idzikowski staff answered 1 year ago

1 0 Best answer

Please insert min. 20 characters.

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

<p>Hi Arkadiusz,</p>

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

<p>This is the home.component.ts file</p>

<pre class="prettyprint"><code>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;
            }
        });
    }
}
</code></pre>

<p>This is the home.component.scss file:</p>

<pre class="prettyprint"><code>/* 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;
}
</code></pre>

<p>And this is the home.component.html file:</p>

<pre class="prettyprint"><code>
<header>
    
    <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>

<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>
    
</header>

<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>
</code></pre>

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

<p><a href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2946064#html-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/mdbootstrap/2946064#html-tab-view</a></p>

<p>Thank you,
Ryan</p>

Please insert min. 15 characters.

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 :)

Add comment

Write

Create snippet

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

Ryannnnn

2Support score
9Questions 7Answers 0Snippets