nav responsive by default?

[ORESoftware]

Please describe the feature you would like to request.

Make nav responsive by default (for small/mobile screens)

I have this in app.component.html:

<app-nav></app-nav>

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>


<section>
  <router-outlet></router-outlet>
</section>

and then for nav.component.html I have:

<header>
  <div class="container">
    <a routerLink="/" class="logo">API Docs</a>
    <nav>
      <ul>
        <li><a routerLink="/">Main/Home</a></li>
        <li><a routerLink="/about">About</a></li>
        <li><a routerLink="/contact">Contact us</a></li>
      </ul>
    </nav>
  </div>
</header>

but when I shrink my browser window down, medium size looks like this:

then the smallest I can make it with Chrome is like this:

as you can see the nav menu items overlap each other, is there a way to get them to use the responsibe drop-down menu style?

[jelbourn]

This appears to be unrelated to Angular Material.

[ORESoftware]

@jelbourn hmmm I am confused - I would think Material would be responsive by default - is there someone that might know what's going on and how I can make it responsive? I am not a front-end guru, just need some info, thanks. Does Material using Bootstrap under the hood or some other responsive library? Why might it not be responsive by default?

[jelbourn]

Angular Material is purely a component library and does not take any opinions on application layout and does not apply any global styles to your application. Your code snippets do not show use of any Angular Material components.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}