Hello!
I’m building a website where I’m trying to insert the pydata-sphinx-theme into a django website. Everything almost works but I’m running in some problems on the page where I combine the sphinx-theme with my navbar.
The code for my navbar looks like this:
<div class="container">
<a class="navbar-brand mr-4" href="/">Mechanics</a>
<button id="button" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarToggle" style="">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/blog/">News</a>
<a class="nav-item nav-link" href="/book/">Book</a>
<a class="nav-item nav-link" href="/solver/">Solver</a>
<a class="nav-item nav-link" href="/pricing/">Pricing</a>
<a class="nav-item nav-link" href="/about/">About</a>
</div>
<div class="navbar-nav ms-auto">
<a class="nav-item nav-link" href="/profile/">Profile</a>
<a class="nav-item nav-link" href="/logout/">Logout</a>
</div>
</div>
</div>
This works flawlessly in the other website pages that do not have the sphinx theme built in.
However when I press the hamburger to expand my navbar it expands, but then the button becomes unresponsive,I am unable to collapse the navbar.
When I press the button I do see that the following tag changes from:
<div id="navbarToggle" class="navbar-collapse collapse show" style="">
to
<div id="navbarToggle" class="navbar-collapse collapsing" style="height: 339px">
But after half a second (the animation time?)
it changes back to:
<div id="navbarToggle" class="navbar-collapse collapse show" style="">
My looks like this, sorry for the horrible format, its a result of combining 2 different webpages using django templating from the sphinx webpage.
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script defer="" 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>
<!-- Custom styles for this template -->
<link href="/static/main.css" rel="stylesheet" type="text/css">
<title>Mechanics - CH03_sphinx</title>
<script data-cfasync="false">
document.documentElement.dataset.mode = localStorage.getItem("mode") || "";
document.documentElement.dataset.theme = localStorage.getItem("theme") || "light";
</script>
<link href="/static/sphinx/_static/styles/theme.css?digest=e353d410970836974a52" rel="stylesheet">
<link href="/static/sphinx/_static/styles/bootstrap.css?digest=e353d410970836974a52" rel="stylesheet">
<link href="/static/sphinx/_static/styles/pydata-sphinx-theme.css?digest=e353d410970836974a52" rel="stylesheet">
<link href="/static/sphinx/_static/vendor/fontawesome/6.1.2/css/all.min.css?digest=e353d410970836974a52" rel="stylesheet">
<link as="font" crossorigin="" href="/static/sphinx/_static/vendor/fontawesome/6.1.2/webfonts/fa-solid-900.woff2" rel="preload" type="font/woff2">
<link as="font" crossorigin="" href="/static/sphinx/_static/vendor/fontawesome/6.1.2/webfonts/fa-brands-400.woff2" rel="preload" type="font/woff2">
<link as="font" crossorigin="" href="/static/sphinx/_static/vendor/fontawesome/6.1.2/webfonts/fa-regular-400.woff2" rel="preload" type="font/woff2">
<link href="/static/sphinx/_static/pygments.css" rel="stylesheet" type="text/css">
<link href="/static/sphinx/_static/styles/sphinx-book-theme.css?digest=14f4ca6b54d191a8c7657f6c759bf11a5fb86285" rel="stylesheet" type="text/css">
<link as="script" href="/static/sphinx/_static/scripts/bootstrap.js?digest=e353d410970836974a52" rel="preload">
<link as="script" href="/static/sphinx/_static/scripts/pydata-sphinx-theme.js?digest=e353d410970836974a52" rel="preload">
<script data-url_root="./" id="documentation_options" src="/static/sphinx/_static/documentation_options.js"></script>
<script src="/static/sphinx/_static/jquery.js"></script>
<script src="/static/sphinx/_static/underscore.js"></script>
<script src="/static/sphinx/_static/_sphinx_javascript_frameworks_compat.js"></script>
<script src="/static/sphinx/_static/doctools.js"></script>
<script src="/static/sphinx/_static/scripts/sphinx-book-theme.js?digest=5a5c038af52cf7bc1a1ec88eea08e6366ee68824"></script>
<script>DOCUMENTATION_OPTIONS.pagename = 'CH03_sphinx';</script><script src="/static/navbar.js"></script>
<link href="genindex.html" rel="index" title="Index">
<link href="search.html" rel="search" title="Search">
<link href="/book/CH04_sphinx/" rel="next" title="4. chapter 4">
<link href="/book/CH02_sphinx/" rel="prev" title="2. chapter 2">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="en" name="docsearch:language">
<link href="/static/main.css" rel="stylesheet" type="text/css">
Does anyone have an idea where my problem could be? thanx in advance! any tips are welcome!
This is my html file:
CH10_sphinx.html (11.1 KB)
If possible a codepen or similar (or link to the site) will help you get quicker answers to your problem.