I have created a navbar with this command ng generate #angular/material:material-nav --name=home and I want my navbar to be fixed on the top when I am scrolling down.
I tried position: fixed; with my mat-sidenav-content but it didn't worked. You guys have any idea how I can do this?
navbar.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>checkout</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
navbar.component.ts
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
Thanks!
Try to change fixedInViewport from false to true.
If you have content(s) above sidenav you can use position sticky:
<mat-sidenav-container class="sidenav-container" style="position:sticky; top: 0">
....
</mat-sidenav-container>
But unfortunately, it is not supported by all browsers (https://caniuse.com/css-sticky).
The second way, you can use position fixed (in this case there should be no element above it):
<mat-sidenav-container class="sidenav-container" style="position:fixed; width: 100%; top: 0">
....
</mat-sidenav-container>
Related
Was trying to get material sidebar to open over two hours, and discovered, that if there is no height set on sidenav-content, then sidebar is not opening at all.
My goal is to have sidebar full height always on the left side, not same height what content has. Current situation with 40vh: SideNav not full height
Does somebody know why it is so, or should my sidenav-content be something different than at the moment?
<app-header (toggleSidenav)="navigationSidenav.toggle()"></app-header>
<mat-sidenav-container autosize="true">
<mat-sidenav #navigationSidenav [fixedInViewport]="false">
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a>
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="navigationSidenav.toggle()">Close</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 40vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
App header looks like so
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
Official docs:
The <mat-sidenav> will, by default, fit the size of its content.
Therefore, you should tell the component explicitly what is the desired height.
I want to change the font across my whole website (effectively changing the font globally), so I've overwritten the Bootstrap font by updating my styles.scss file as below:
$theme-colors:(
"primary": #84329b,
);
#import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
This works successfully, however, the font in my header does not change in-line with this (see the below image).
How can I ensure the font changes for the header?
For completeness, I've included the html code for my header below. As you can see, I've attempted to update the font specifically on the header, as it wasn't working after updating the styles.scss file. Unfortunately, this doesn't seem to work either.
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap" rel="stylesheet">
<mat-sidenav-container class="sidenav-container">
<!---links to appear in the sidenav if the device is a mobile-->
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/catalogue" (click)="drawer.close()"
>Catalogue</a
>
<a mat-list-item routerLink="/notepads" (click)="drawer.close()"
>Explore Pads</a
>
<hr class="divider-line">
<a mat-list-item routerLink="/login" (click)="drawer.close()">Login</a>
<a mat-list-item routerLink="/sign-up" (click)="drawer.close()"
>Sign Up</a
>
</mat-nav-list>
<hr class="divider-line">
</mat-sidenav>
<!---content below is for everything contained along the header, mobile or not-->
<mat-sidenav-content>
<mat-toolbar>
<!---this is the menu icon to appear on mobile-->
<button
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async"
>
<mat-icon>menu</mat-icon>
</button>
<!---spacer between the mobile menu button and Padder logo-->
<span class="left-spacer" *ngIf="isHandset$ | async"></span>
<!---Padder logo for desktop-->
<span *ngIf="!(isHandset$ | async)" class="logo" routerLink="/"
><img
class="logo-image"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!--links for the header when the device is not a handset-->
<div class="nav-links" *ngIf="!(isHandset$ | async)">
<a mat-button routerLink="/catalogue">Catalogue</a>
<a mat-button routerLink="/notepads">Explore Pads</a>
</div>
<div class="search-container" *ngIf="!(isHandset$ | async)">
<mat-form-field class="header-search">
<input matInput placeholder="Search for products or pads.." />
</mat-form-field>
</div>
<!---Padder logo for mobile-->
<span *ngIf="isHandset$ | async" class="logo" routerLink="/"
><img
class="logo-image-mobile"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!---spacer between Padder logo and login button-->
<span class="right-spacer" *ngIf="isHandset$ | async"></span>
<!--login / sign-up button to be shown when user not logged in, desktop-->
<div class="login-links">
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Login</a
>
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Sign Up</a
>
</div>
<!---search icon to be shown when the user is on mobile-->
<div>
<button mat-icon-button *ngIf="isHandset$ | async">
<mat-icon>search</mat-icon>
</button>
</div>
<!---dropdown to be down when the user is logged into the website-->
<!---
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a mat-menu-item routerLink="/profile">
<span>Profile</span>
</a>
<a mat-menu-item href="">
<button mat-stroked-button>Logout</button>
</a>
</mat-menu>
</div>--->
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
In you styles.scss, do the following:
#import "https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap";
* {
font: 500 20px/32px Roboto, 'MuseoModerno', sans-serif !important
}
This will definitely work
I would like to make it so that when I click the mat-button, the menu items would be the same size and push everything else down. Below are attached images of the current situation and desired.
Current closed dropdown
Current opened dropdown
Desired closed dropdown
Here is my HTML code:
<mat-footer>
<div class="footerLinks">
<span *ngFor="let footerLink of footerContent.footerLinks">
<span *ngIf="footerLink.footerDrop.length > 1 else single">
<a mat-button [matMenuTriggerFor]="subLinks" href="javascript:void(0)" title={{footerLink.subFooterTitle}}>{{footerLink.subFooterTitle}}
<mat-icon>arrow_drop_down</mat-icon>
</a>
<mat-menu #subLinks="matMenu" arrowPosition="up">
<a mat-menu-item *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</mat-menu>
</span>
<ng-template #single >
<a mat-button *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</ng-template>
</span>
</div>
<div class="social">
<span *ngFor="let socialLink of footerContent.socialLinks">
<a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}></a>
</span>
</div>
<div class="terms">
<mat-copywrite-footer [innerHTML]="footerContent.finePrint.value"> </mat-copywrite-footer>
</div>
</mat-footer>
I got a big problem using this example from material's SideNav Example
I don't want my sidenav to overlap on my navbar/toolbar
here's my code
<mat-sidenav #drawer class="sidenav"
[fixedInViewport]="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<li *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a routerLinkActive="active" [routerLink]="[menuItem.path]" class="nav-link">
{{menuItem.title}}
</a>
</li>
</mat-nav-list>
</mat-sidenav>
here's an image of it
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.
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>