Auto close Navbar when click on link (responsive mode)

web
mobile

Topic: Auto close Navbar when click on link (responsive mode)

Noksu Kaw asked 3 years ago

Hello On the navigation bar - responsive mode - when I click on a link (case linding page), the navigation bar does not close automatically !! Is there a way to close when I click on a link ?? Thank you.

Marta Szymanska staff pro premium answered 3 years ago

Hi, here is the code for this:
<script>
        $('.navbar-collapse a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });
    </script>
Best, Marta

Mauricio Ortensi pro commented 3 years ago

Thank you so much Marta. It works perfectly for my. Best Regards.

İsa Sua ÖNAL commented 5 months ago

Thank you my friend. but, before closing a few seconds waiting. Can it close instantly?


Marta Szymanska staff pro premium commented 5 months ago

Hi,

I reproduces this script in the snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1400438#html-tab-view but it seems that there is no problem with closing.

Best, Marta


Udis Klorenz commented 4 weeks ago

Hei thank you for the code. But I'm using the burger animation too and when I click on a link the nav closes but the animation is still the "x" and not the burger... how can I fix that?

Thank you


Noksu Kaw answered 3 years ago

Thank you so mutch Marta ! # problem solved

If you want to use Typescript you can import the NavbarComponent from angular-bootstrap-md.

import { NavbarComponent as navmdb } from '../../../node_modules/angular-bootstrap-md/navbars/navbar.component';
export class YourComponent implements OnInit {
@ViewChild('navbarid')
private navbaridRef: navmdb;
onClick(event): void {
if (this.navbaridRef.shown) {
this.navbaridRef.toggle(event);
}
}

You will have full control on the object NavbarComponent (in my exemple rename to navmdb).
Of course in your html you need to reference the navbarid

<mdb-navbar #navbarid SideClass="navbar navbar-expand-sm navbar-dark fixed-top scrolling-navbar">

 


nothingeni pro answered 2 months ago

I'm using MDB Angular and the previous answer is outdated since Angular 8.

This solution is currently working for me (01/2020).

HTML

  <mdb-navbar #navbarid SideClass="navbar navbar-expand-md navbar-dark sticky-top bg-light z-depth-0">
    ...
    <li class="nav-item">
        <a class="nav-link" (click)="onClick()">Link</a>"
    </li>
    ...

TS

import { NavbarComponent as navmdb } from '../../../node_modules/ng-uikit-pro-standard/lib/free/navbars/navbar.component';

@ViewChild('navbarid', {static: false}) navbaridRef: navmdb; //Get the NavbarComponent

... 
onClick() {
 this.navbaridRef.toggle(); //Hide the collapse menu after click
}

Marta Szymanska staff pro premium commented 2 months ago

Hi,

thank you for your solution.

Best, Marta


Hei thank you for the code. But I'm using the burger animation too and when I click on a link the nav closes but the animation is still the "x" and not the burger... how can I fix that?

Thank you


Marta Szymanska staff pro premium commented 4 weeks ago

Hi,

Do you also use the Angular version?

Best, Marta


Udis Klorenz commented 4 weeks ago

hiso i've these imports from this cdn version 4.14.0:

https://mdbootstrap.com/md-bootstrap-cdn/

thx


Marta Szymanska staff pro premium commented 3 weeks ago

Hi,

OK, but could you present your code in the snippet here: https://mdbootstrap.com/snippets/? Because I don't know where is the code which I can see and try to help you with fixing the bug.

Best, Marta


Udis Klorenz commented 3 weeks ago

https://mdbootstrap.com/snippets/jQuery/udis_klorenz/1864005

Thank you very much In the snippet you can see, that when the animation is done from burger to X, you can click on a link but after you clicked on the link the animation doesn't go back to the burger...


Marta Szymanska staff pro premium commented 3 weeks ago

Hi,

check your snippet now: https://mdbootstrap.com/snippets/jQuery/udis_klorenz/1864005. I think I found a solution for you.

Best, Marta


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No