CODEWITHSUNDEEP
cssangulartwitter-bootstrapresponsive-designangular-material
John Earl
John Earl

Reputation: 115

Angular Material nav bar not a responsive

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 navbar cut off

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.

Upvotes: 5

Views: 3945

Answers (1)

John Earl
John Earl

Reputation: 115

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>

Upvotes: 0

Related Questions