Im tried to crate Angular material Fixed side nav , but I face some conflict on my projects, My issue is side bar header not fixed, i added content details and scrolls the content then header is hide,
how can I fix this issue please help me to fix this one
Thanks.
My code
sidenav-fixed-example.html
<mat-toolbar class="example-header">Header</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened class="example-sidenav">
<mat-nav-list>
<!-- Sidebar -->
<ul class="sidebar navbar-nav" >
<div class=" fixed-search " >
<div class="sidebar-date-and-time">
<span class="side-mnu" routerLink='/home'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
<div class="p-2 bd-highlight txt-sm">Home</div>
</div>
</span>
<span class="side-mnu-active" routerLink='/categories'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
<div class="p-2 bd-highlight txt-sm">Categories</div>
</div>
</span>
<span class="side-mnu" routerLink='/customerdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
<div class="p-2 bd-highlight txt-sm ">Customers</div>
</div>
</span>
<span class="side-mnu" routerLink='/orderdetails'>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
<div class="p-2 bd-highlight txt-sm">Orders</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
<div class="p-2 bd-highlight txt-sm">Sales Items</div>
</div>
</span>
<span class="side-mnu">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
<div class="p-2 bd-highlight txt-sm">Announcements</div>
</div>
</span>
</div>
</div>
<!--side bar-->
</ul>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
</mat-sidenav-content>
</mat-sidenav-container>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
.css
.example-container {
position: absolute;
top: 60px;
bottom: 60px; height: 100%;
left: 0;
right: 0;
}
.example-sidenav {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
background: rgba(255, 0, 0, 0.5);
}
.example-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.example-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}