Everything seems to work except for the collapsible navbar when I override the default index page for Material for Mkdocs.
All that appears is the darkened screen:
It DOES work on the default Mkdoc sections, so I think I'm missing something in my overrides:
This is all that is in my home.html
. What am I missing?
{% extends "main.html" %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
{%endblock%}
<!-- BOOTSTRAP STYLESHEET IMPORT -->
{% block tabs %}
{{ super() }}
<!-- BOOTSTRAP STYLESHEET IMPORT -->
{% block styles %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
{{ super() }}
{% endblock %}
<!-- STYLE OVERRIDES JUST FOR INDEX PAGE -->
<style>
/* keep nav at top on index.html */
header.md-header {
position: initial;
}
/* override md-main contents */
.md-main {
display: none;
}
</style>
<!-- STYLE OVERRIDES JUST FOR INDEX PAGE -->
<div class="header">
</div>
{% endblock %}
<!-- Content -->
{% block content %}{% endblock %}
<!-- Application footer -->
{% block footer %}{{ super() }}{% endblock %}