I've scoured the internet far and wide, yet I can't seem to uncover a solution to my dilemma. That's why I'm reaching out here.
The issue at hand is with my nav bar, which utilizes mat-toolbar. Everything functions flawlessly on tablets or larger screens, but when the screen size is smaller and the nav bar exceeds the space, the overflow gets cut off. I've experimented with implementing Bootstrap to rectify the problem, but so far, it has been unsuccessful. You can view the code in the app->app.component.html file via this StackBlitz link: stackblitz.com/github/jearl4/portfolio (https://i.sstatic.net/vJ0RY.png)
Take a look at 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>
Here is my css:
.navbar-spacer {
flex: 1 1 auto;
}
.header {
min-width: 319px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
}
I've explored the guidance provided in Create a Responsive Toolbar using Angular Material, but unfortunately, it hasn't resolved my specific issue. Although responsive design could play a role in solving the problem, my main focus is fixing the cutoff predicament without necessarily diving into full responsiveness. Any suggestions would be greatly appreciated.