2019-11-18 02:37:58 +01:00
<!DOCTYPE html>
< html lang = "en" >
2019-11-20 02:37:13 +01:00
< head >
< meta charset = "utf-8" / >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" / >
< meta name = "description" content = "" / >
< meta name = "author" content = "" / >
2019-12-14 20:03:22 +01:00
< title > Static Navigation - SB Admin< / title >
2019-11-20 02:37:13 +01:00
< link href = "css/styles.css" rel = "stylesheet" / >
2020-06-19 00:02:25 +02:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin = "anonymous" > < / script >
2019-11-20 02:37:13 +01:00
< / head >
2019-12-14 20:03:22 +01:00
< body >
2019-11-20 02:37:13 +01:00
< nav class = "sb-topnav navbar navbar-expand navbar-dark bg-dark" >
2020-06-19 00:02:25 +02:00
< a class = "navbar-brand" href = "index.html" > Start Bootstrap< / a >
< button class = "btn btn-link btn-sm order-1 order-lg-0" id = "sidebarToggle" href = "#" > < i class = "fas fa-bars" > < / i > < / button >
<!-- Navbar Search -->
2019-11-20 02:37:13 +01:00
< form class = "d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0" >
< div class = "input-group" >
< input class = "form-control" type = "text" placeholder = "Search for..." aria-label = "Search" aria-describedby = "basic-addon2" / >
< div class = "input-group-append" >
< button class = "btn btn-primary" type = "button" > < i class = "fas fa-search" > < / i > < / button >
< / div >
< / div >
< / form >
<!-- Navbar -->
< ul class = "navbar-nav ml-auto ml-md-0" >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" id = "userDropdown" href = "#" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > < i class = "fas fa-user fa-fw" > < / i > < / a >
< div class = "dropdown-menu dropdown-menu-right" aria-labelledby = "userDropdown" >
2020-06-19 00:02:25 +02:00
< a class = "dropdown-item" href = "#" > Settings< / a >
< a class = "dropdown-item" href = "#" > Activity Log< / a >
2019-11-20 02:37:13 +01:00
< div class = "dropdown-divider" > < / div >
< a class = "dropdown-item" href = "login.html" > Logout< / a >
< / div >
< / li >
< / ul >
2019-11-18 02:37:58 +01:00
< / nav >
2019-11-20 02:37:13 +01:00
< div id = "layoutSidenav" >
< div id = "layoutSidenav_nav" >
< nav class = "sb-sidenav accordion sb-sidenav-dark" id = "sidenavAccordion" >
< div class = "sb-sidenav-menu" >
< div class = "nav" >
< div class = "sb-sidenav-menu-heading" > Core< / div >
2020-06-19 00:02:25 +02:00
< a class = "nav-link" href = "index.html" >
< div class = "sb-nav-link-icon" > < i class = "fas fa-tachometer-alt" > < / i > < / div >
Dashboard
< / a >
2019-11-20 02:37:13 +01:00
< div class = "sb-sidenav-menu-heading" > Interface< / div >
2020-06-19 00:02:25 +02:00
< a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#collapseLayouts" aria-expanded = "false" aria-controls = "collapseLayouts" >
< div class = "sb-nav-link-icon" > < i class = "fas fa-columns" > < / i > < / div >
2019-11-20 02:37:13 +01:00
Layouts
2020-06-19 00:02:25 +02:00
< div class = "sb-sidenav-collapse-arrow" > < i class = "fas fa-angle-down" > < / i > < / div >
< / a >
2019-11-20 02:37:13 +01:00
< div class = "collapse" id = "collapseLayouts" aria-labelledby = "headingOne" data-parent = "#sidenavAccordion" >
2020-06-19 00:02:25 +02:00
< nav class = "sb-sidenav-menu-nested nav" >
< a class = "nav-link" href = "layout-static.html" > Static Navigation< / a >
< a class = "nav-link" href = "layout-sidenav-light.html" > Light Sidenav< / a >
< / nav >
2019-11-20 02:37:13 +01:00
< / div >
2020-06-19 00:02:25 +02:00
< a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#collapsePages" aria-expanded = "false" aria-controls = "collapsePages" >
< div class = "sb-nav-link-icon" > < i class = "fas fa-book-open" > < / i > < / div >
2019-11-20 02:37:13 +01:00
Pages
2020-06-19 00:02:25 +02:00
< div class = "sb-sidenav-collapse-arrow" > < i class = "fas fa-angle-down" > < / i > < / div >
< / a >
2019-11-20 02:37:13 +01:00
< div class = "collapse" id = "collapsePages" aria-labelledby = "headingTwo" data-parent = "#sidenavAccordion" >
< nav class = "sb-sidenav-menu-nested nav accordion" id = "sidenavAccordionPages" >
2020-06-19 00:02:25 +02:00
< a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#pagesCollapseAuth" aria-expanded = "false" aria-controls = "pagesCollapseAuth" >
Authentication
< div class = "sb-sidenav-collapse-arrow" > < i class = "fas fa-angle-down" > < / i > < / div >
< / a >
2019-11-20 02:37:13 +01:00
< div class = "collapse" id = "pagesCollapseAuth" aria-labelledby = "headingOne" data-parent = "#sidenavAccordionPages" >
2020-06-19 00:02:25 +02:00
< nav class = "sb-sidenav-menu-nested nav" >
< a class = "nav-link" href = "login.html" > Login< / a >
< a class = "nav-link" href = "register.html" > Register< / a >
< a class = "nav-link" href = "password.html" > Forgot Password< / a >
< / nav >
2019-11-20 02:37:13 +01:00
< / div >
2020-06-19 00:02:25 +02:00
< a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#pagesCollapseError" aria-expanded = "false" aria-controls = "pagesCollapseError" >
Error
< div class = "sb-sidenav-collapse-arrow" > < i class = "fas fa-angle-down" > < / i > < / div >
< / a >
2019-11-20 02:37:13 +01:00
< div class = "collapse" id = "pagesCollapseError" aria-labelledby = "headingOne" data-parent = "#sidenavAccordionPages" >
2020-06-19 00:02:25 +02:00
< nav class = "sb-sidenav-menu-nested nav" >
< a class = "nav-link" href = "401.html" > 401 Page< / a >
< a class = "nav-link" href = "404.html" > 404 Page< / a >
< a class = "nav-link" href = "500.html" > 500 Page< / a >
< / nav >
2019-11-20 02:37:13 +01:00
< / div >
< / nav >
< / div >
< div class = "sb-sidenav-menu-heading" > Addons< / div >
2020-06-19 00:02:25 +02:00
< a class = "nav-link" href = "charts.html" >
< div class = "sb-nav-link-icon" > < i class = "fas fa-chart-area" > < / i > < / div >
Charts
< / a >
< a class = "nav-link" href = "tables.html" >
< div class = "sb-nav-link-icon" > < i class = "fas fa-table" > < / i > < / div >
Tables
< / a >
2019-11-20 02:37:13 +01:00
< / div >
< / div >
< div class = "sb-sidenav-footer" >
< div class = "small" > Logged in as:< / div >
Start Bootstrap
< / div >
< / nav >
2019-11-18 03:15:58 +01:00
< / div >
2019-11-20 02:37:13 +01:00
< div id = "layoutSidenav_content" >
< main >
< div class = "container-fluid" >
2019-12-14 20:03:22 +01:00
< h1 class = "mt-4" > Static Navigation< / h1 >
2019-11-20 02:37:13 +01:00
< ol class = "breadcrumb mb-4" >
< li class = "breadcrumb-item" > < a href = "index.html" > Dashboard< / a > < / li >
2019-12-14 20:03:22 +01:00
< li class = "breadcrumb-item active" > Static Navigation< / li >
2019-11-20 02:37:13 +01:00
< / ol >
< div class = "card mb-4" >
2019-12-12 18:14:13 +01:00
< div class = "card-body" >
2020-06-19 00:02:25 +02:00
< p class = "mb-0" >
This page is an example of using static navigation. By removing the
< code > .sb-nav-fixed< / code >
class from the
< code > body< / code >
, the top navigation and side navigation will become static on scroll. Scroll down this page to see an example.
< / p >
2019-12-12 18:14:13 +01:00
< / div >
2019-11-20 02:37:13 +01:00
< / div >
< div style = "height: 100vh;" > < / div >
2019-12-14 20:03:22 +01:00
< div class = "card mb-4" > < div class = "card-body" > When scrolling, the navigation stays at the top of the page. This is the end of the static navigation demo.< / div > < / div >
2019-11-20 02:37:13 +01:00
< / div >
< / main >
< footer class = "py-4 bg-light mt-auto" >
< div class = "container-fluid" >
< div class = "d-flex align-items-center justify-content-between small" >
2020-06-19 00:02:25 +02:00
< div class = "text-muted" > Copyright © Your Website 2020< / div >
2019-11-20 02:37:13 +01:00
< div >
< a href = "#" > Privacy Policy< / a >
·
< a href = "#" > Terms & Conditions< / a >
< / div >
< / div >
< / div >
< / footer >
2019-11-18 02:37:58 +01:00
< / div >
2019-11-20 02:37:13 +01:00
< / div >
2020-06-19 00:02:25 +02:00
< script src = "https://code.jquery.com/jquery-3.5.1.min.js" crossorigin = "anonymous" > < / script >
< script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" crossorigin = "anonymous" > < / script >
2019-11-20 02:37:13 +01:00
< script src = "js/scripts.js" > < / script >
< / body >
< / html >
