1

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:

enter image description here

It DOES work on the default Mkdoc sections, so I think I'm missing something in my overrides:

enter image description here

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 %}
chillingfox
  • 131
  • 9

0 Answers0