Topic: Close Navbar after click

Heins free asked 6 years ago

Hi, how can I close Navbar after click an item in angular2? Please give me an example. Regards Thomas

Dawid Adach pro commented 6 years ago

Could you please specify what do you mean by "close navbar"?

Heins free commented 6 years ago

See the answer from riccy. He describes my problem. how do I make the automatic close of the navbar?

Dawid Adach pro answered 6 years ago

Gents, Navbar component has methods like show() , hide() and toggle() which can be called. You can give your navbar element an id. i.e.
<mdb-navbar #myNavbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
and past reference to the element to any function/object/element let's say , you want to have a button which will close it:
<button (click)="hideNavbar(myNavbar)">Close me</button>
Then within your comoponent.ts, you can simply call .hide() function on navbar element
hideNavbar( e: any ) { e.hide(); }
It's good point, though - we will add auto close option to the navbar within next update. Thanks for pointing this out including description.

Heins free commented 6 years ago

Thank your for your help

riccy pro answered 6 years ago

on a small screen you expand the navbar by clicking on the "hamburger-button". example after you click on a nav-link (here for example "Karte"), the navbar doesn't go back to its previous state, its still expanded. You have to click on the "hamburger-button" again to get some more space on the screen.  

os853834 free commented 4 years ago

Is there a workaround for this? Leaving the menu open after making a selection seems like a bug.

Konrad Stępień staff commented 4 years ago

Hi @os853834,

Please make a new support post, because of this support has 3 years. For this time project get many changes.

When you will make a new post please also provide code and information about your project. It will help us a lot to resolve the problem.

Best, Konrad.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No