Collapsible horizontal navbar on mobile?

[demisx]

Hi. The project looks amazing. I am considering using it for our next product. However, I am having hard time locating some components that are available in Bootstrap. For example, how would I go about implementing the horizontal navbar that self-collapses at given mobile breakpoint? Similar to how your navbar works here https://material.angularjs.org/#/demo/material.components.toolbar when you resize the browser window. I've gone through demos, but couldn't locate this functionality. Thank you.

[EladBezalel]

Cant see the problem.. can you explain where you expect to see problems?

[demisx]

I am just not clear which md component from https://material.angularjs.org/#/ will give me a collapsible on mobile navbar.

[EladBezalel]

Basically, according the Material Design by Google, your navigation should be from a sidenav which works great on mobile!

If you still want to do what your asking you can try combine md-tabs with scroll-shrink toolbar

[demisx]

Thank you @EladBezalel. The layout of my site doesn't have a sidebar navigation in a desktop version by design (nothing I can do about it - this is a UX requirement). Only the horizontal navigation bar.

I don't mind all vertical navigation items (similar to md-tabs) collapse to a sidebar on mobile, though. Ideally, I would like to have this behavior https://fezvrasta.github.io/bootstrap-material-design/#navbar, but the nav items look like md-tabs. Do you still think combining md-tabs with scroll-shrink toolbar is the way to go? Sorry, I am new to material and have read the docs 2 times, but I still don't understand yet how this would produce the navbar I am looking for. Thank you so much for your help.

[EladBezalel]

You could try something like this

[demisx]

@EladBezalel I've tried it, but the buttons don't seem to collapse when I resize the browser down to a mobile viewport. Unless, I am missing something.

[EladBezalel]

Sadly you need to set height to md-content to make it work :\

I updated the plnkr you're welcome :)

[EladBezalel]

By the way - you can always ask in the Angular Material Forum

[demisx]

Thank you for sticking with me. The updated plunkr still doesn't collapse navigation items on mobile for me. Perhaps, I am not explaining this right. I'm attaching an image showing what kind of navbar I need to build with both, desktop and mobile versions (see below). Hopefully, that clarifies it. I will also post this on the AM forum. Thank you for the link--didn't know about this forum before. Maybe this is not something that cannot be done in Angular Material yet and I need to go back to Bootstrap again.

[EladBezalel]

Not a thing you should try to do in material design, you should read the specs here and understand if material is the design code you want to use.

[EladBezalel]

@ThomasBurleson please close.

[EladBezalel]

btw i suggest to read this

[demisx]

After reading Material Design docs one more time, I've realized that I am trying to build Bootstrap design with Material tools. I will need to redesign the entire navigation bar to follow the Material Design principles. Thank you @EladBezalel for helping me understand this.