Angular Material nav bar not a responsive

Question

I've searched all over and can't seem to find an answer for this so posting here.

I have a nav bar that uses mat-toolbar. It works great on any screen tablet size or above but when the nav bar doesn't fit on screen the part that doesn't fit doesn't display. I've tried using bootstrap to fix the issue but haven't had any luck. Here is a stackblitz link to the repo stackblitz.com/github/jearl4/portfolio. The nav bar code is in the app->app.component.html file

Here is my navbarcode:

<nav class="navbar navbar-toggleable-xs">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <h1>J.T. Earl</h1>

      <span class="navbar-spacer"></span>

      <button mat-button routerLink="/home">
        <mat-icon>home</mat-icon>
      </button>
      <button mat-button routerLink="/about" routerLinkActive="active">About</button>
      <button mat-button>Services</button>
      <button mat-button>Contact</button>
      <button mat-button routerLink="/capm">Capm</button>

    </mat-toolbar-row>
  </mat-toolbar>
</nav>
<!-- routed view goes here -->
<router-outlet></router-outlet>

and my css:

.navbar-spacer {
  flex: 1 1 auto;
}

.header {
  min-width: 319px;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}

I've attempted the solution from Create a Responsive Toolbar using Angular Material but that hasn't solved my problem. That post is about a responsive navbar and while making the navbar responsive is probably involved in fixing my issue that is not the problem I'm trying to solve. Instead I am just trying to fix the cut off issue, the solution doesn't need to involve responsive design, although that would be welcome.

Possible duplicate of Create a Responsive Toolbar using Angular Material — core114
– core114, Commented Aug 15, 2018 at 4:36
I've tried the solutions in that post and they still haven't fixed my issue. I think this is different enough to warrant its own post. — John Earl
– John Earl, Commented Aug 15, 2018 at 12:26
here is the stackblitz link of the repo stackblitz.com/github/jearl4/portfolio — John Earl
– John Earl, Commented Aug 15, 2018 at 22:22
Have you found the solution? I am also facing the same issue. — Deependra Solanky
– Deependra Solanky, Commented Oct 19, 2018 at 5:25

John Earl · Accepted Answer · 2018-10-19 18:22:22Z

I had to change my navigation style from a strictly horizontal layout to horizontal with a vertical side nav on small screens but this code is how I fixed my problem.

  <nav class="navbar navbar-toggleable-xs">
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <h1>title</h1>

    <span class="navbar-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <button mat-button routerLink="/home">
        <mat-icon>home</mat-icon>
      </button>
      <button mat-button routerLink="/about" routerLinkActive="active">About</button>
      <button mat-button routerLink="/capm">Capm</button>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <button mat-button routerLink="/home">
          <mat-icon>home</mat-icon>
        </button>
        <button mat-button routerLink="/about" routerLinkActive="active">About</button>
        <button mat-button routerLink="/capm">Capm</button>
      </div>
    </mat-sidenav>

Collectives™ on Stack Overflow

Angular Material nav bar not a responsive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related