Navbar Mobile Collapse question


Topic: Navbar Mobile Collapse question

sameretto asked 2 years ago

Hi, If I want to keep the menu open when a person clicks on an item how would I do so? Right now I have a ViewChild of the Navbar and I show it again if the user clicks. This is ok but causes a small flickering issue because it closes and opens again. If I can avoid it closing at all until a person has clicked on the hamburger menu icon to close it that would be great.

This effect is only desired when it goes to the hamburger menu mode.

html code: https://gyazo.com/c39b4497977a31c2ec9567cf844b54ff


Damian Gemza staff answered 2 years ago

Dear sameretto,

The navbar on mobile devices will hide automatically after the click if the link which has been clicked contains a routerLink directive.

If you don't want this behavior - to navbar not hide after clicking on a link, please use the Router's navigate() method.

Here's the sample code which works fine for me:

.html:

<li class="nav-item active">
 <a class="nav-link waves-light" mdbWavesEffect (click)="navigateTo('home')">Home<span class="sr-only">(current)</span></a>
</li>

.ts:

constructor(private router: Router) {

  }

  navigateTo(path: string){
    this.router.navigate([path]);
  }

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.4.1
  • Device: Mobile
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes