Custom HTML can be injected into a status dashboard to fully replace and customize the standard status dashboard header and footer.
Custom HTML can be created and enabled by navigating to Status Dashboards > Edit > Dashboard Options > Custom HTML and authoring/enabling the header and/or footer in the HTML editor.
The styling classes of standard status dashboard headers and footers are built utilizing the Bootstrap 4.x framework. The default structure is shown below and can provide a good starting point if you would like to build a custom header and/or footer. The header and footer styling can be managed by creating custom CSS.
Default Header
<nav class="navbar navbar-expand-md navbar-light border-bottom">
<div class="container">
<a class="nav-link nav-home pl-0 ml-sm-3 ml-md-0" href="/">Status Dashboard</a>
<button class="navbar-toggler mr-sm-3" type="button" data-toggle="collapse" data-target="#navbarToggler">
<span class="fa fa-toggler fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
<li class="nav-item">
<a class="nav-link ml-sm-3" href="https://test.link.com">Test Link</a>
</li>
</ul>
</div>
</div>
</nav>
Default Footer
<footer class="footer mt-auto py-3">
<div class="container">
<div class="text-center py-5 text-muted">
Powered by <a class="text-muted" href="https://www.statusdashboard.com">StatusDashboard</a>
</div>
</div>
</footer>